An Infographic is excellent for displaying KPIs, progress statuses, and other summarizing information. Infographics work well when wanting to display key data points that visually draw the user's attention.

Primary Element: from virtualitics_sdk import Infographic, InfographData, InfographDataType

Exploring Infographics

An Infographic is comprised of one or more InfographData elements, which can be arranged in rows or columns. Each InfographData element can also be assigned an InfographDataType, which will determine its color theme. The different InfographDataType options are:

POSITIVE (Green)

NEGATIVE (Red)

INFO (Blue)

WARNING (Yellow)

An InfographData element can also be assigned any of the icons specified in virtualitics_sdk.icons.fonts. To see what an icon looks like, look up its name on the Google Fonts library.

Note: If both an icon and InfographDataType are assigned, the icon will take on the color of the InfographDataType’s theme.

Creating Infographics

In this example, let’s create an infographic that displays the result of a basic text analysis performed on a string.

from virtualitics_sdk import Infographic, InfographData, InfographDataType

# Importing since we'll be analyzing string data in this example
import string 
import collections

class CreateInfographic(Step):
    def run(self, flow_metadata):
        # Setup
        store_interface = StoreInterface(**flow_metadata)
        page = store_interface.get_page()
        store_interface.update_progress(5, "Creating infographic")

        # We'll be providing an analysis of of this string in the infographic
        # You could pull this string from the input elements if you wanted.
        text_str = "This is a string."

        # Perform analysis on string
        words_count = len(text_str.split(" "))
            characters_count = len(text_str)
            count = lambda l1,l2: sum([1 for x in l1 if x in l2])
            punctuation_count = count(text_str,set(string.punctuation))
            most_common_char_value = collections.Counter(text_str).most_common(1)[0][0]

        # Create an InfographicData element for each analysis component
        total_words = InfographData(
            label="Total Words", 
            main_text=str(words_count),
            supporting_text="Total words in uploaded text.",
            icon="warning",
            _type=InfographDataType.NEGATIVE,
        )

        total_characters = InfographData(
            label="Total Characters", 
            main_text=str(characters_count),
            supporting_text="Total characters contained in the uploaded text.",
            icon="add_circle",
            _type=InfographDataType.WARNING,
        )

        total_punctuation = InfographData(
            label="Total Punctuation", 
            main_text=str(punctuation_count),
            supporting_text="Total punctuation marks contained in the uploaded text.",
            icon="accessibility",
            _type=InfographDataType.POSITIVE,
        )

        most_common_character = InfographData(
            label="Most Common Character", 
            main_text=most_common_char_value,
            supporting_text="Was the most common character contained in the uploaded text. ",
            icon="info",
            _type=InfographDataType.INFO,
        )

        # Create a list of our InfographData elements
       infograph_data_parts = [
            total_words,
            total_characters,
            total_punctuation,
            most_common_character
        ]

        # Assemble infographic
        string_analysis_infograph = Infographic(
            title="Infographic (Good for KPIs) - Word count analysis based on the text uploaded in the last step", 
            description="In this description, you can provide some basic context for the metrics displayed in the rest of
                         the infographic",
            data=infograph_data_parts
        )

        # Add infographic to our current page and desired section
        section = page.get_section_by_title("")
        section.add_card_w_content(string_analysis_infograph, "Key Insights")

        ## Update the page
        store_interface.update_page(page)

# Create our app and assemble the infographic step
infographic_example_app = App(name="Infographic Example", description="A basic example of how to create an infographic.")

infographic_content = Section(title="", content=[])
infographic_page = Page(title="Infographic Example", sections=[infographic_content])
infographic_step = CreateInfographic(
    title="Infographic Example",
    description="",
    parent="Example",
    type=StepType.RESULTS,
    page=infographic_page
)

infographic_example_app.chain(ordered_steps=[infographic_step])

What to Expect

This will build out and populate an Infographic, making it easier to review data within the App.