ods-select – Codelibrary

Basic example, fed by a static list

ods-select accept any kind of source as long as it’s a json array. It can be an array of strings, but also an array of object and ods-select label-modifier and value-modifier can be used to specify which key in the array item to use for, respectively the label and the field value.

<div class="row">
    <div class="col-md-4 col-md-offset-2 col-sm-6 mb" ng-if="true"
         ng-init="names = ['John','George','Harry','Meredith']; selection">
        <h3>
            Simplest mode, with a string array
        </h3>
        <ods-select options="names"
                    selected-values="selection"
                    placeholder="Pick a name"></ods-select>
        <h4>Input:</h4>
        <pre ng-bind="names|json"></pre>
        <h4>Selection:</h4>
        <pre ng-bind="selection|json"></pre>
    </div>
    <div class="col-md-4 col-sm-6 mb" ng-if="true"
         ng-init="
            names = [
                {name:'Mister John',id:'john'},
                {name:'King George',id:'george'},
                {name:'Prince Harry',id:'harry'},
                {name:'Lady Meredith',id:'meredith'}
            ];
            selection">
        <h3>
            Modifiers options with json object array
        </h3>
        <ods-select options="names"
                    selected-values="selection"
                    label-modifier="name"
                    value-modifier="id"
                    placeholder="Pick a name"></ods-select>
        <h4>Input:</h4>
        <pre ng-bind="names|json"></pre>
        <h4>Selection:</h4>
        <pre ng-bind="selection|json"></pre>
    </div>
</div>

/** DO NOT COPY **/
/* the CSS is only for a better reading of the demo */
.mb {
    margin-bottom: 30px;
}
h3 {
    height: 60px;
}
.odswidget-select {
    margin-bottom: 25px;
}

Basic example, with a default selection

Start with a selected value, and let the user select another one.

You can also force the user to always have a selection.

<div class="row">
    <div class="col-md-4 col-md-offset-2 col-sm-6 mb" ng-if="true"
         ng-init="names = ['John','George','Harry','Meredith']; selection">
        <h3>
            Use ng-init to set the selection only once at the start
        </h3>
        <ods-select ng-init="selection = ['John']"
                    options="names"
                    selected-values="selection"
                    placeholder="Pick a name"></ods-select>
        <h4>Input:</h4>
        <pre ng-bind="names|json"></pre>
        <h4>Selection:</h4>
        <pre ng-bind="selection|json"></pre>
    </div>
    <div class="col-md-4 col-sm-6 mb" ng-if="true"
         ng-init="names = ['John','George','Harry','Meredith']; selection">
        <h3>
            If the selection is cleared, reset it to "John"
        </h3>
        {{ selection = (selection.length > 0 ? selection : ['John']); ''}}
        <ods-select options="names"
                    selected-values="selection"
                    placeholder="Pick a name"></ods-select>
        <h4>Input:</h4>
        <pre ng-bind="names|json"></pre>
        <h4>Selection:</h4>
        <pre ng-bind="selection|json"></pre>
    </div>
</div>

/** DO NOT COPY **/
/* the CSS is only for a better reading of the demo */
.mb {
    margin-bottom: 30px;
}
h3 {
    height: 60px;
}
.odswidget-select {
    margin-bottom: 25px;
}

ods-facet-results enumerates the values (“categories”) of a facet, and exposes it in a variable. this variable can then be the option source of ods-select.

ods-facet-results widget documentation

Note 1: that facets are limited to the first 100 results, it’s then suitable for categories, types, properties that have a small set of distinct values

Note 2: set disjunctive mode to true in the context parameters to keep other values available after a selection

Dataset in use: us-hospitals (See it on userclub domain)

Fields in use:

geo_point (geo_point_2d)	type
[34.69553069,-82.98721979]	General Acute Care Hospital
[40.673121466,-75.365457125]	General Acute Care Hospital
[38.578735152,-109.563613143]	Critical Access
[41.491227149,-112.025755668]	General Acute Care Hospital

<div class="container">
    <ods-dataset-context context="ushospitals"
                         ushospitals-dataset="us-hospitals"
                         ushospitals-parameters="{'disjunctive.type':true}">
        <div ods-facet-results="typelist"
             ods-facet-results-facet-name="type"
             ods-facet-results-context="ushospitals">
            <h4>
                Type of hospitals
            </h4>
            <ods-select options="typelist"
                        selected-values="ushospitals.parameters['refine.type']"
                        label-modifier="name + ' - ' + (count | number) + ' hospitals'"
                        value-modifier="name"
                        placeholder="Select a type"></ods-select>
            <br/>
            <ods-map context="ushospitals" scroll-wheel-zoom="false" location="4,38.37612,-106.69922"
                     basemap="jawg.streets"></ods-map>
        </div>
    </ods-dataset-context>
</div>

Select cities by their population
Select companies by their capital, number of employees
Select regions by their solar power production
Select power sources by their production etc…

Computing the average, maximum, sum of a field to sort de list of proposition in ods-select

ods-adv-analysis Code Library resource and it’s documentation.

Note 1: performing an adv-analysis on a field containing huge quantity of distinct values can alter performances of the page (the browser needs to download the long list of possible values, then it displays and manipulates the list into the widget)

Note 2: selecting a value and refining the context will no longer let you choose other values as they will disappear with the selection. (contrary to ods-facets and ods-facet-results that can use the disjunctive mode, ie. multi selection mode). To counter that, we need 2 contexts: 1 to perform the analysis and feed ods-select, 1 to refine and display the chart

Dataset in use: shanghai-world-university-ranking (See it on userclub domain)

Fields in use:

university_name	pub (decimal)	alumni (decimal)	award (decimal)	world_rank_int (numeric)	pcp (decimal)	ns (decimal)	hici (decimal)
Harvard University	100	100	100	1	70.5	100	100
University of Cambridge	70.9	96.3	91.5	2	66.5	59.5	53.8
Heidelberg University	53.6	19.7	25	42	27.5	38.8	27.5
Tsinghua University	74.6	10.2	0	48	24.1	38.4	37.1

<div class="container">
    <ods-dataset-context context="ctxanalysis,ctxrefine"
                         ctxanalysis-dataset="shanghai-world-university-ranking"
                         ctxanalysis-parameters="{'sort':'world_rank'}"
                         ctxrefine-dataset="shanghai-world-university-ranking"
                         ctxrefine-parameters="{'sort':'world_rank'}">
        <div ods-adv-analysis="rankings"
             ods-adv-analysis-context="ctxanalysis"
             ods-adv-analysis-group-by="university_name"
             ods-adv-analysis-select="MAX(world_rank_int) as maxscore, university_name"
             ods-adv-analysis-order-by="maxscore"
             ods-adv-analysis-limit="100">
            <h3>
                Select an university in this TOP 100 list (sorted by it's best ranking overall)
            </h3>
            <ods-select options="rankings"
                        selected-values="ctxrefine.parameters['refine.university_name']"
                        label-modifier="university_name + ', Best ranking: ' + maxscore"
                        value-modifier="university_name"
                        placeholder="Select an university"></ods-select>

            <div ng-if="!ctxrefine.parameters['refine.university_name'][0]">
                <h4>Select an university to see it's ranking details over years</h4>
            </div>

            <div ng-if="ctxrefine.parameters['refine.university_name'][0]">
                <h4>{{ ctxrefine.parameters['refine.university_name'][0] }} rankings details, over years</h4>
                <ods-chart single-y-axis="true" align-month="true">
                    <ods-chart-query context="ctxrefine" field-x="year" maxpoints="100"
                                     timescale="year">
                        <ods-chart-serie expression-y="pcp" chart-type="column" label-y="PCP score" function-y="AVG" color="#263891"
                                         scientific-display="true">
                        </ods-chart-serie>
                        <ods-chart-serie expression-y="alumni" label-y="Alumni score" chart-type="column" function-y="AVG" color="#19630A"
                                         scientific-display="true">
                        </ods-chart-serie>
                        <ods-chart-serie expression-y="award" label-y="Award score" chart-type="column" function-y="AVG" color="#F7B133"
                                         scientific-display="true">
                        </ods-chart-serie>
                        <ods-chart-serie expression-y="pub" label-y="Pub score" chart-type="column" function-y="AVG" color="#BA0129"
                                         scientific-display="true">
                        </ods-chart-serie>
                        <ods-chart-serie expression-y="ns" label-y="NS score" chart-type="column" function-y="AVG" color="#C0C5CC"
                                         scientific-display="true">
                        </ods-chart-serie>
                        <ods-chart-serie expression-y="hici" label-y="HICI score" chart-type="column" function-y="AVG" color="#000000"
                                         scientific-display="true">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>

            </div>

        </div>
    </ods-dataset-context>
</div>

/** DO NOT COPY **/
/* the CSS is only for a better reading of the demo */
.mb {
    margin-bottom: 30px;
}
h3 {
    height: 60px;
}
.odswidget-select {
    margin-bottom: 25px;
}

Last but not least, the good practice for geo filters ! (showcasing ods-results)

Each time it’s available, filter with the ID! and avoid labels or names! Specially for geographical division (City names, States etc…)

This resource showcase ods-results as the source of ods-select but most of all Opendatasoft geo referentials that always propose codes and labels for each division.

ods-results documentation.

IMPORTANT: In the lander context, an optional parameter fields is set to limit the size of the results. It improves DRASTICALLY the performance to avoid manipulating big geo shapes in geo datasets. We STRONGLY advise to keep this parameter and list only the required fields (ie. the “label field” and the “value field” of your ods-select)

Field in use in laender-germany (See it on userclub domain)

land_name	land_code
Rheinland-Pfalz	07
Niedersachsen	03
Baden-Württemberg	08
Thüringen	16

Field in use in kreise-germany (See it on userclub domain)

land_name	land_code	geo_shape (geo_shape)
Rheinland-Pfalz	07	{“coordinates”:[[…]]}
Niedersachsen	03	{“coordinates”:[[…]]}
Baden-Württemberg	08	{“coordinates”:[[…]]}
Thüringen	16	{“coordinates”:[[…]]}

<div class="container">
    <ods-dataset-context context="kreis,lander"
                         lander-dataset="laender-germany"
                         lander-parameters="{'fields':'land_name,land_code'}"
                         kreis-dataset="kreise-germany">
        <div ods-results="landerlist"
             ods-results-context="lander"
             ods-results-max="500">
            <h3>
                Display the name, refine with the code
            </h3>
            <ods-select options="landerlist"
                        selected-values="kreis.parameters['refine.land_code']"
                        label-modifier="fields.land_name"
                        value-modifier="fields.land_code"
                        placeholder="Select a Lander"></ods-select>
            <h4>
                Selected Lander code (used to refine the map context) : {{ kreis.parameters['refine.land_code'] }}
            </h4>
            <ods-map no-refit="true" scroll-wheel-zoom="false" basemap="jawg.sunny" location="6,51.32924,10.45403">
                <ods-map-layer-group>
                    <ods-map-layer context="kreis" color="#0086D6" picto="ods-circle"
                                   show-marker="true" display="auto" shape-opacity="0.8" point-opacity="1"
                                   border-color="#FFFFFF" border-opacity="1" border-size="1.5"
                                   border-pattern="solid" size="4" size-min="3" size-max="5"
                                   size-function="linear"></ods-map-layer>
                </ods-map-layer-group>
            </ods-map>
            <ul>
                <li>
                    <a href="https://data.opendatasoft.com/explore/dataset/georef-germany-land%40public/"
                       target="_blank">Germany Lander dataset source</a>
                </li>
                <li>
                    <a href="https://data.opendatasoft.com/explore/dataset/georef-germany-kreis%40public/"
                       target="_blank">Germany Kreis dataset source</a>
                </li>
            </ul>
    </ods-dataset-context>
</div>

Filters as a sentence

Read a sentence that describes the applied filters in your page by inlining several ods-select.

<div class="ods-selects">
    <p>Show</p>
    <ods-select selected-values="choice"
                options="['objects','things','stuff']"
                placeholder="pick what you want"></ods-select>
    <p>in the</p>
    <ods-select selected-values="place"
                options="['car','home']"
                placeholder="pick a place"></ods-select>
    <p>since</p>
    <ods-select selected-values="month"
                options="['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']"
                placeholder="month"></ods-select>
    <ods-select selected-values="year"
                options="['2018','2019','2020','2021']"
                placeholder="year"></ods-select>
    <p>.</p>
</div>

/***** Inlined SELECT *****/
.ods-selects {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.ods-selects > .odswidget-select {
    margin: 3px 6px;
}
.ods-selects > :not(.odswidget-select) {
    margin-top: 0;
    margin-bottom: 0;
}

Simple inlined layout

ods-select takes all the available width. In order to inline several ods-select on the same line and keep the same strategy, you need to add some CSS. This resource provides the minimum CSS you need to achieve this easily.

For mobile display, to assure a minimum width of your ods-select, it can be convenient to set a min-width, see comments in the CSS code.

<div class="shared-width-ods-selects">
    <ods-select selected-values="choice"
                options="['objects','things','stuff']"
                placeholder="pick what you want"></ods-select>
    <ods-select selected-values="place"
                options="['car','home']"
                placeholder="pick a place"></ods-select>
    <ods-select selected-values="long"
                options="['2018','2019','2020','2021', 'let see how it behaves with small screens.']"
                placeholder="very long content here, even too long for mobile display"></ods-select>
</div>

/***** Share width inlined ods-select *****/
.shared-width-ods-selects {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.shared-width-ods-selects > .odswidget-select {
    margin: 3px 6px;
    flex: 1;
    /*
        To assure a minimum width, set a min-width property here.
     */
    min-width: 200px;
}

Drilldown select for geographical levels

A reuse of ods-select to create filters based on a serie of geographical levels.

IMPORTANT: This example integrates advanced parameters that can be customized:

disabled parameter in ods-select: used to disable the filter if the condition is true. In the example, the filter is disabled when the previous filter is not activated.
on-change parameter in ods-select: used to clear previous filters on the context ctx when a new selection is made. In the example, it enables you to select a région, a département, and then switch to another région, without having to clear the filter département.
Angular expressions after each ods-select: used to sync the selection on all the geographical levels. In the example, it enables you to have a list of département filter on the région selected.

Note: you will need to create one context for each geographical level, in order to keep the full list of the items after the refine.

Dataset in use: demographyref-france-pop-active-sexe-activite-commune-millesime (See it on userclub domain)

Fields in use:

reg_code	dep_code	epci_code	com_arm_code	reg_name	dep_name	epci_name	com_arm_name
24	36	243600350	36095	Centre-Val de Loire	Indre	CC de la Châtre et Sainte-Sévère	Lignerolles
24	36	243600350	36100	Centre-Val de Loire	Indre	CC de la Châtre et Sainte-Sévère	Lourouer-Saint-Laurent
24	36	200040558	36107	Centre-Val de Loire	Indre	CC Écueillé-Valençay	Lye
24	36	243600327	36112	Centre-Val de Loire	Indre	CA Châteauroux Métropole	Mâron

<ods-dataset-context context="ctx,ctxregions,ctxdepartements,ctxepcis,ctxcommunes"

                     ctx-dataset="demographyref-france-pop-active-sexe-activite-commune-millesime"
                     ctx-parameters="{'refine.year':'2017','disjunctive.reg_code':true,'disjunctive.dep_code':true,'disjunctive.epci_code':true,'disjunctive.com_arm_code':true}"
                     ctx-domain="public"

                     ctxregions-dataset="demographyref-france-pop-active-sexe-activite-commune-millesime"
                     ctxregions-domain="public"
                     ctxregions-parameters="{'refine.year':'2017','disjunctive.reg_code':true,'disjunctive.dep_code':true,'disjunctive.epci_code':true,'disjunctive.com_arm_code':true}"
                     ctxdepartements-dataset="demographyref-france-pop-active-sexe-activite-commune-millesime"
                     ctxdepartements-domain="public"
                     ctxdepartements-parameters="{'refine.year':'2017','disjunctive.reg_code':true,'disjunctive.dep_code':true,'disjunctive.epci_code':true,'disjunctive.com_arm_code':true}"
                     ctxepcis-dataset="demographyref-france-pop-active-sexe-activite-commune-millesime"
                     ctxepcis-domain="public"
                     ctxepcis-parameters="{'refine.year':'2017','disjunctive.reg_code':true,'disjunctive.dep_code':true,'disjunctive.epci_code':true,'disjunctive.com_arm_code':true}"
                     ctxcommunes-dataset="demographyref-france-pop-active-sexe-activite-commune-millesime"
                     ctxcommunes-domain="public"
                     ctxcommunes-parameters="{'refine.year':'2017','disjunctive.reg_code':true,'disjunctive.dep_code':true,'disjunctive.epci_code':true,'disjunctive.com_arm_code':true}"

                     ng-init="values = {};
                              selected = {}">

    <div ods-adv-analysis="regions"
         ods-adv-analysis-context="ctxregions"
         ods-adv-analysis-select="count(*)"
         ods-adv-analysis-group-by="reg_code,reg_name"
         ods-adv-analysis-order-by="reg_name"
         ods-adv-analysis-limit="300">
        {{ values.regions = regions; ""}}
    </div>
    <div ng-if="ctxdepartements.parameters['refine.reg_code'].length != 0"
         ods-adv-analysis="departements"
         ods-adv-analysis-context="ctxdepartements"
         ods-adv-analysis-select="count(*)"
         ods-adv-analysis-group-by="dep_code,dep_name"
         ods-adv-analysis-order-by="dep_name"
         ods-adv-analysis-limit="300">
        {{ values.departements = departements; "" }}
    </div>
    <div ng-if="ctxepcis.parameters['refine.dep_code'].length != 0"
         ods-adv-analysis="epcis"
         ods-adv-analysis-context="ctxepcis"
         ods-adv-analysis-select="count(*)"
         ods-adv-analysis-group-by="epci_code,epci_name"
         ods-adv-analysis-order-by="epci_name"
         ods-adv-analysis-limit="300">
        {{ values.epcis = epcis; "" }}
    </div>
    <div ng-if="ctxcommunes.parameters['refine.epci_code'].length != 0"
         ods-adv-analysis="communes"
         ods-adv-analysis-context="ctxcommunes"
         ods-adv-analysis-select="count(*)"
         ods-adv-analysis-group-by="com_arm_code,com_arm_name"
         ods-adv-analysis-order-by="com_arm_name"
         ods-adv-analysis-limit="300">
        {{ values.communes = communes; "" }}
    </div>

    <div class="ods-selects">
        <ods-select selected-values="selected.regions" placeholder="Toutes régions"
                    label-modifier="reg_name"
                    value-modifier="{'code':reg_code,'name':reg_name}"
                    options="values.regions"
                    multiple="false"
                    is-loading="true"
                    on-change="ctx.parameters['refine.com_arm_code'] =
                                   ctx.parameters['refine.epci_code'] =
                                   ctx.parameters['refine.reg_code'] =
                                   ctx.parameters['refine.dep_code'] = []"></ods-select>
        {{
        ctxcommunes.parameters['refine.reg_code'] =
        ctxepcis.parameters['refine.reg_code'] =
        ctxdepartements.parameters['refine.reg_code'] =
        ctx.parameters['refine.reg_code'] =
        (selected.regions | toObject:'code' | keys);
        ""}}
        <ods-select disabled="ctxdepartements.parameters['refine.reg_code'].length == 0"
                    selected-values="selected.departements" placeholder="Tout départements"
                    label-modifier="dep_name"
                    value-modifier="{'code':dep_code,'name':dep_name}"
                    options="values.departements"
                    multiple="false"
                    is-loading="true"
                    on-change="ctx.parameters['refine.com_arm_code'] =
                                   ctx.parameters['refine.epci_code'] =
                                   ctx.parameters['refine.reg_code'] =
                                   ctx.parameters['refine.dep_code'] = []"></ods-select>
        {{
        ctxcommunes.parameters['refine.dep_code'] =
        ctxepcis.parameters['refine.dep_code'] =
        ctx.parameters['refine.dep_code'] =
        (selected.departements | toObject:'code' | keys);
        ""}}
        <ods-select disabled="ctxepcis.parameters['refine.dep_code'].length == 0"
                    selected-values="selected.epcis" placeholder="Tout EPCIs"
                    label-modifier="epci_name"
                    value-modifier="{'code':epci_code,'name':epci_name}"
                    options="values.epcis"
                    multiple="false"
                    is-loading="true"
                    on-change="ctx.parameters['refine.com_arm_code'] =
                                   ctx.parameters['refine.epci_code'] =
                                   ctx.parameters['refine.reg_code'] =
                                   ctx.parameters['refine.dep_code'] = []"></ods-select>
        {{
        ctxcommunes.parameters['refine.epci_code'] =
        ctx.parameters['refine.epci_code'] =
        (selected.epcis | toObject:'code' | keys);
        ""}}
        <ods-select disabled="ctxcommunes.parameters['refine.epci_code'].length == 0"
                    selected-values="selected.communes" placeholder="Toutes communes"
                    label-modifier="com_arm_name"
                    value-modifier="{'code':com_arm_code,'name':com_arm_name}"
                    options="values.communes"
                    multiple="false"
                    is-loading="true"
                    on-change="ctx.parameters['refine.com_arm_code'] =
                                   ctx.parameters['refine.epci_code'] =
                                   ctx.parameters['refine.reg_code'] =
                                   ctx.parameters['refine.dep_code'] = []"></ods-select>
        {{
        ctx.parameters['refine.com_arm_code'] =
        (selected.communes | toObject:'code' | keys);
        ""}}
    </div>
<div ng-if="selected.regions.length > 0 ||
                       selected.departements.length > 0 ||
                       selected.epcis.length > 0 ||
                       selected.communes.length > 0">
    <button class="clear-filters-button"
            ng-click="selected.regions.length = 0;
                          selected.departements.length = 0;
                          selected.epcis.length = 0;
                          selected.communes.length = 0;
                          values.departements.length = 0;
                          values.epcis.length = 0;
                          values.communes.length = 0;">
        Reset selection
    </button>
    <i class="fa fa-times-circle" aria-hidden="true"></i>
    </div>
    <h2>Structure de la population, par CSP et activité, en 2017</h2>
    <ods-chart align-month="true">
        <ods-chart-query context="ctx" field-x="year" maxpoints="0" series-breakdown="variable_label">
            <ods-chart-serie expression-y="value" color="Paired" chart-type="column"
                             label-y="Nombre de personnes" function-y="SUM" scientific-display="true">
            </ods-chart-serie>
        </ods-chart-query>
    </ods-chart>
</ods-dataset-context>

/***** Inlined SELECT *****/
.ods-selects {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 10px 0px;
}

.odswidget-select {
    min-width: 200px;
}

/***** Clear filters button *****/

.clear-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.clear-filters-button {
  background: none;
  border: none;
  color: var(--text);
}

.clear-filters-button:hover {
  opacity: 0.65;
}

Widget Tricks - ods-select

Basic example, fed by a static list

Basic example, with a default selection

Filter by type, fed by a facet (via ods-facet-results widget)

Filter by the results of an analysis (via ods-adv-analysis widget)

Last but not least, the good practice for geo filters ! (showcasing ods-results)

Filters as a sentence

Simple inlined layout

Drilldown select for geographical levels