Proportions Input

A proportions input component. Can be used as part of an ISLE dashboard or standalone. In the latter case, you want to handle changes via the onChange attribute or bind the value to a global variable via the bind attribute.

Example:

<ProportionsInput
    user
    id="Survey"
    question="Decide what is important"
    group="Group decision"
    nElements={3}
    colors = {[ "red", "blue", "gold" ]}
    personalHeight={300}
    groupHeight={200}
    margin="80px"
    legends={[ "bitcoin", "old", "diamonds" ]}
/>

Open interactive preview

Options:

  • disabled | boolean: controls whether the input field is deactivated. Default: false.
  • height | number: proportions input height (in px). Default: 200.
  • innerRadius | number: inner radius of proportions pie chart (in px). Default: 75.
  • legends | array: group labels. Default: none.
  • margin | string: proportion input margin (in px). Default: none.
  • nElements | number: number of elements. Default: 6.
  • onChange | function: callback function to be invoked when a choice is made. Default: onChange(){}.
  • precision | number: displayed precision of proportion values. Default: 1.
  • step | number: the step of the arrows seen when hovering the cursor above the input box. Default: 0.1.

results matching ""

    No results matching ""