When is this applicable?

An Infographic is excellent for displaying KPIs, progress statuses, and other summarizing information.

Primary Element: from predict_backend.page.elements import Infographic

Supporting Classes: from predict_backend.page.elements import InfographData, InfographDataType

How-To

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 predict_backend.utils.fonts. To see what an icon looks like, just look up its name on this site. If both an icon and InfographDataType are assigned, the icon will take on the color of the InfographDataType’s theme.

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

from predict_backend.flow.flow import Flow
from predict_backend.flow.step import Step, StepType
from predict_backend.page import Page, PageType, Section
from predict_backend.store.store_interface import StoreInterface
from predict_backend.page.elements 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 flow and assemble the infographic step
infographic_example = Flow("Infographic Example", "A basic example of how to create an infographic.")

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

What to Expect (Validation)