npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-multi-faceted-search

v0.2.3

Published

Ember CLI addon that provides a multi-faceted search architecture and views for a data set.

Downloads

18

Readme

Ember Multi-Faceted Search

This addon provides a view for managing a faceted search alongside data. You provide an array of filters with terms, and the addon will allow a user to add and remove these terms while notifying your app - which allows you to handle the data end of things.

Installation

From your project / app, run

ember install ember-multi-faceted-search

This addon creates a new component that you can use to wrap your data display: {{multi-faceted-search}}

Although styles can be customized, using Bootstrap 3 in your project is recommended for the collapsing behavior.

Using this addon

The Component

{{#multi-faceted-search facets=yourFacetsArray addFacet=(action 'yourAddFacetAction') removeFacet=(action 'yourRemoveFacetAction')}}
// Your data goes here!  In any format, try a <table> or a <ul> or a smiley face!
{{/multi-faceted-search}}

The Facet Array

In your app, where you handle the data, add :

import Facet from 'ember-multi-faceted-search/components/multi-faceted-search/facet';

This is a custom Ember.Object that looks like:

{
  category: "LabelForFacet",
  type: "checkbox", // or "link"
  terms: [] // each term should be an object with at least : { value: "stringToDisplay", selected: boolean } also optional properties 'display' and 'count',
  emptyMessage: "Message when no facets to display",
  ...
}

Massage your data to be an array of Facet objects. Feed this array into the above component as facets=yourFacetsArray.

Add and Remove Actions

Define actions that will modify your data based on actions taken by the user ( addFacet / removeFacet below ).

{{#multi-faceted-search facets=facets addFacet=(action "addFacet") removeFacet=(action "removeFacet")}}

The Facet object from above includes a selected property that returns the currently selected terms. If your facets change based on selected terms, you need to handle refreshing and setting already selected terms, or editing the existing object. An example of the former :

facets: [],
yourURL: "http...",

actions: {
  yourAddFacetAction() {
    let oldFacets = this.get('facets'),
        query = "?",
        newFacets = [];

    // building URL query params from selected facets
    oldFacets.forEach( (facet) => {
      let selectedTerms = facet.get('selectedValues');
      if (selectedTerms.length)
        selectedTerms = selectedTerms.replace(/\s+/g, ''); // "term1, term2" => "term1,term2"
        query = query + facet.get('category') + "=" + selectedTerms + "&"
    });

    // JSON example - let's say our service returns : { facets: [ { facet1: ['term1', 'term2'] }, { facet2: ... } ] }
    // so we build the new array of Facets from this
    $.getJSON(this.get("yourURL") + query).then( (rtn) => {
      Object.keys(rtn.facets).forEach( (category) => {
        newFacets.push(Facet.create({ category: category, type: "checkbox", terms: rtn.facets[category] }));
      });
      this.set("facets", newFacets);
    });
  }
}

Search

Adding search is simple!

{{#multi-faceted-search facets=facets search=query searchAction=(action 'searching')}}
...
{{/multi-faceted-search}}

Defining a two-way bound search parameter and adding a searchAction will generate a search box and notify you when the user initiates a search. Currently, search is initiated by submitting the search input (ie hitting ENTER or clicking the attached button).

Options

This addon allows you to manipulate text and css via a passed in configuration object:

{{#multi-faceted-search options=options ...}}
...

Check the options object in multi-faceted-search/component.js for available options.