Here to Help

Component Widget

Estimated reading: 13 minutes 98 views

Contents

Overview

Component widgets in Infoveave are diverse tools that add functionality and interaction to your dashboards. They include components, shapes, icons, images, text, diagrams, and filters (checkbox and dropdown)

Shape Widget

The Shape widget allows you to experiment with different shapes, colors, and interactions to craft impactful visualizations that effectively communicate your data insights to your audience.

This section will walk you through the steps for configuring and customizing the shape widget, including selecting a shape type and adjusting properties such as fill color, stroke, rotation, and scale.

  1. Add the shape widget:
    • Drag and drop the shape widget from the Infoveave toolbar onto your canvas.
  1. Customize the widget
    • Customize the general properties, such as the title and shape type.
    • Shape Type:
      • Within the shape widget settings, select the desired shape type, such as circle, rectangle, or polygon.
      • For polygons, specify the number of sides to create shapes like triangles, pentagons, and more.
    • Fill Color:
      • In the shape widget settings, define the fill color of the shape using RGBA values.
      • Choose the desired color to customize the appearance of the shape.
    • Stroke:
      • Customize the stroke (border) properties of the shape, including color, style, and width.
      • Specify the desired stroke color, style (e.g., solid), and width to enhance the shape’s borders.
    • Rotation:
      • Within the shape widget settings, adjust the rotation of the shape to achieve different orientations.
      • Set the rotation angle to suit your design requirements and achieve desired visual effects.
    • Scale:
      • Modify the scale of the shape within the widget settings.
      • Use the scale option to resize the shape, making it larger or smaller proportionate to other elements in your data presentation.
Shape Widget

Icon Widget

The Icon widget allow you to choose from a variety of icons and customize their colors. This help you understand the steps for configuring and customizing the icon widget, including selecting an icon type and adjusting the icon color.

  1. Add the Icon widget:

    •  Drag and drop the icon widget from the Infoveave toolbar onto your canvas.

    •  Access the icon library under widget customization.

    • Select the desired icon from the library .

  2. Customize the icon widget:

    •  Icon Type:
      • Within the icon widget settings, select the desired icon type from the provided library.
      • Choose the icon that best represents the concept or data you want to convey.
    • Icon Color:
      • Customize the color of the icon within the widget settings.
      • Select the desired color to match your design or data visualization needs.
Icon Widget

Image Widget

The Image widget in Infoveave enables you to incorporate images. This section will walk you through the steps for configuring and customizing the image widget, including adding an image, setting position, repeat, and size.

  1. Add an Image:
    • Select the image widget from the Infoveave toolbar and drag it onto your canvas.
    • Access the media library within the widget settings.
    • Choose the desired image from the media library and add it to the image widget.
  1. Customize the widget:
    • Position:
      • Within the image widget settings, adjust the position of the image using alignment options.
      • Choose from left, right, center, top, or bottom to position the image within the widget.
    • Repeat:
      • In the image widget settings, specify how the image should repeat within the widget area.
      • Select from options such as no-repeat, repeat-x (horizontal repeat), or repeat-y (vertical repeat).
    • Size:
      • Within the image widget settings, modify the size of the image as auto, fit, and cover.
Image Widget

Text Widget

The Text widget in Infoveave provides a simple and effective way to add text to your dashboard. 

  1. To add text:
    • Drag and drop the text widget from the Infoveave toolbar onto your canvas.
    • Click on ‘Edit Text’  to text edit modal.
    • Enter or paste the desired text into the widget.
Text Widget
  1. To customize :

    • Text Formatting:
      • Use the toolbar or formatting options provided within the text widget to modify the font style, size, alignment, and other text formatting attributes.
      • Adjust the font properties, such as bold, italic, underline, color, and highlight, to enhance the appearance of the text.
    • Text Alignment:
      • Within the text widget settings, select the desired alignment for the text.
      • Choose from options such as left-aligned, center-aligned, right-aligned, or justified to position the text accordingly.
    •  Background Color:
      • Customize the background color of the text widget to create visual distinction or match the overall design of your dashboard.
      • Use RGBA values to specify the color and transparency for the background.
  2. Click on Save 

Diagram Widget

The Diagram widget in Infoveave help creating and visualizing diagrams, flowcharts, and other graphical representations to your Infoboard. 

Here’s a step-by-step guide on how to use the it effectively:

  1. Add the diagram widget:

    • To add a Diagram Widget to your Infoveave dashboard, select the “Diagram” option from the list of available widgets.
    • Drag and drop the Diagram Widget onto your dashboard canvas.

  2. Edit the Diagram:

    • Once you’ve added the Diagram Widget, click on the widget to open the “Edit Diagram” modal.
    • In the Edit Diagram modal, you’ll find options like shapes, lines, pencil, text, and add image to create and customize your diagram.
    • Use the shapes option to add predefined shapes like rectangles, circles, arrows, etc., to the canvas.
    • Utilize the lines option to connect nodes or create flow lines within the diagram.
    • The pencil tool allows you to draw freehand shapes or lines on the canvas.
    • Add text to the diagram using the text option to provide labels or descriptions.
    • If desired, you can also incorporate images by using the add image option.

  3. Further Customization:

    • The Edit Diagram modal provides additional customization options for the diagram components you’ve created.
    • Select an element on the canvas, such as a shape or line, and you’ll see options for modifying its properties.
    • Customize the size, position, color, font, and other relevant attributes of the selected elements.
    • Use the alignment and arrangement options to organize and structure the elements within the diagram.

  4. Save:

    • Once you’ve created and customized your diagram, simply “Close” the Edit Diagram modal.
    • The updated diagram will be displayed within the Diagram Widget on your Infoveave dashboard.
Diagram Widget

Dropdown Filter

The Dropdown filter in Infoveave allows you to select a single or multiple dimension values from the datasource. Here’s a step-by-step guide on how to use the it effectively:

  1. Adding the Dropdown Filter:
    • To add a Dropdown Filter to your Infoveave dashboard, click on the “Widgets” menu.
    • Select the “Dropdown Filter” option from the list of available widgets.
    • Drag and drop the Dropdown Filter Widget onto your dashboard canvas.
  2. Configuring the Dropdown Filter:
    • Once you’ve added the Dropdown Filter Widget, click on it to access the configuration options.
    • In the configuration panel, link the Dropdown Filter to the datasource.
    • Choose the dimension from the datasource that you want to filter by.
    • Apply the fixed filters or drill downs as required.
Dropdown Filter
  1. Customizing the Dropdown Filter:
    • To customize the drop down filter, click on the drop down filter, choose the customization option from the customization panel.
    • Use “General” to customize the drop down widget layout.
    • The “Title” edit option allows you to customize the widget title.
    • The Drop down edit helps you to customize the look and feel of the drop down filter. The fields are: 
      • Size: Select the size of the dropdown menu, such as Small, Medium, or Large.
      • Limit selection: Enable this option to restrict the number of selected values.
      • Max selected values: Specify the maximum number of values that can be selected.
      • Dropdown height: Adjust the height of the dropdown menu.
      • Selected item radius: Define the radius or curvature of the selected items.
      • Gap between selected items: Set the spacing between selected items.
      • Inner padding: Control the padding or spacing inside the dropdown filter.
      • Drop-down position: Choose the position of the dropdown menu, such as Bottom, Top, Left, or Right.
      • Searchable: Enable this option to allow users to search for specific filter options.
      • Variant: Select the variant style for the dropdown menu, such as With Box, Rounded, or Standard.
      • Input background color: Customize the background color of the input field or selected items.
      • Value background color: Define the background color of the filter values.
      • Value font color: Set the font color of the filter values.
      • Dropdown background color: Customize the background color of the dropdown menu.
      • Dropdown items color: Specify the color of the options in the dropdown menu.
Drop down Edit

Checkbox Filter

The Checkbox Filter in Infoveave is helps filtering data by allowing users to select multiple options from a list of checkboxes. Here’s a step-by-step guide on how to use the Checkbox Filter effectively:

  1. Adding the Checkbox Filter:
    • To add a Checkbox Filter to your Infoveave dashboard, click on the “Widgets” menu.
    • Select the “Checkbox Filter” option from the list of available widgets.
    • Drag and drop the Checkbox Filter Widget onto your dashboard canvas.
  2. Configuring the Checkbox Filter:
    • Once you’ve added the Checkbox Filter Widget, click on it to access the configuration options.
    • In the configuration panel, link the Checkbox Filter to the datasource.
    • Choose the dimension from the datasource that you want to filter by.
    • Apply the fixed filters or drill downs as required.
  1. Customizing the Checkbox Filter:
    • To customize the Checkbox filter, click on the drop down filter, choose the customization option from the customization panel.
    • Use “General” to customize the Checkbox widget layout.
    • The “Title” edit option allows you to customize the widget title.
    • The Checkbox edit helps you to customize the look and feel of the Checkbox filter. The fields are:
      • The Checkbox Filter Widget offers several customization options to tailor its appearance and behavior to your needs.
      • Size: Select the size of the checkbox and label, such as Small, Medium, or Large.
      • Gap: Set the spacing or gap between checkboxes.
      • Padding: Adjust the padding or spacing inside the Checkbox Filter.
      • Check box radius: Define the radius or curvature of the checkboxes.
      • Orientation: Choose the orientation of the checkboxes, such as Vertical or Horizontal.
      • Label position: Specify the position of the label relative to the checkbox, such as Right, or Left.
      • Check list color: Customize the color of the checkboxes or labels in the checklist.
Checkbox Filter edit