GithubHelp home page GithubHelp logo

extension-meter-component's Introduction

Meter Component Bundle

Show completion percentage and progress inside the Directus Studio with these progress meter components.

This is a bundle extension that includes an interface and a display.

Interface

UI

Example view of the meter interface.

Settings

Settings screen for the meter interface.

Display

UI

Example view of the meter display.

Settings

Settings screen for the meter display.

Quick Overview Video

Configuration

This extension works with the following field types.

  • Integer
  • Decimal
  • Float

There are five configuration options.

  • Minimum Value - The minimum value used to calculate the meter percentage (default: 0).
  • Maximum Value - The maximum value used to calculate the meter percentage (default: 100).
  • Label - The label to display below the meter or on hover (for the display).
  • Indicator - Show an indicator with the current value. ie (50%)
  • Color - the color of the meter bar. Defaults to the primary theme color.

The components also respect conditional formatting so that you can configure custom percentages, labels, and colors based on a specific value.

Example view of the meter with conditional formatting.

Settings screen for the meter with conditional formatting.

extension-meter-component's People

Contributors

bryantgillespie avatar

Stargazers

Patrick Lafleur avatar avatar

Watchers

Ben Haynes avatar Jonathan Wagner avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.