Graphics

Intro

The Graphics feature allow for the visualisation of element field data in various graphics. It is sometimes helpful to visualise the element data in graphics such as PieCharts, Bar graphs, custom Flowcode graphics etc. These graphics will update and change when data is added to or changes in elements.

Building graphics

You can add a graphic to an element via the 'Graphics' tab on the element edit screen. An element can optionally have 1 or more graphics associated to it.

Each graphic will have the following properties:

• Element ID: The ID of the linked Element
• Title: Helpful display title for the graphic
• Description: Optional description for the graphic
• Type: The type of graphic to display, eg: PieChart
• Fields: The fields that are to be displayed in the graphic
  • Field ID
  • Label

Add a new graphic

When adding a graphic, an admin user can add the graphic details and save the details of the graphic. This is stored in the graphics table

Graphic fields

Once a graphic has been created, you can associated element fields to the graphic. Fields that match the following criteria can be added:

• Fields that are within the associated element
• Fields of the appropriate type, eg: for a pie chart, the field will need to be of number type

Graphic fields are stored in the graphic_fields table

Element graphics tab

If an element has associated graphics, the graphics tab is available on the element page.

Empty graphics

If all the associated fields of a graphic have no values, the graphic displays just the title and indicates which fields need to be completed.

Incomplete graphics

If some of the associated fields have no values, the graphic displays partially (if possible) and indicates which fields need to be completed.

Complete graphics

If all of the associated fields of a graphic are complete the graphic will be displayed

Downloading graphics

It is possible for users to download the graphic using the download button

Graphic service

The GraphicService class is used to compile the appropriate data structures for a given graphic depending on the type of graphic.

Refactored Structure

The GraphicService has been refactored to follow DRY principles, extracting common patterns into reusable methods:

• Core Methods:

  • getGraphicData(): Entry point that processes all graphics for an element
  • getPieChartData(), getPropellorChartData(), etc.: Specialized handlers for specific chart types

• Helper Methods:

  • getGraphicFieldProgressRecords(): Retrieves field progress records for a graphic
  • groupProgressRecordsByIndexAndKey(): Groups records by current_index and field_key
  • processGroupedRecordsIntoChartData(): Processes grouped records into chart data
  • generateStandardChartData(): High-level method that combines the above steps

Most chart types now use the standardized approach through generateStandardChartData(), while specialized charts maintain their custom logic. This approach ensures consistent behavior across similar chart types while making the codebase more maintainable.

Adding New Chart Types

To add a new chart type:

1. Add a new case in the getGraphicData() switch statement
2. If the chart follows the standard pattern, create a method that calls generateStandardChartData()
3. If the chart requires specialized handling, create a custom method with the necessary logic

Graphic types

Graphic types are handles in the GraphicTypes.php enum class.

Available types

Currently the following graphic types are allowed:

• Pie Chart
• Propellor Chart
• Four Paradigms Chart
• Product-Market Fit Chart
• Product-Feature Match Chart

Notes on the Propellor Chart

This is a custom chart created specifically for the Customer Concentration Risk element. It is not intended to be used for other elements.

This chart requires 12 fields to be added in a specific order, as such an Instructions tab has been provided for the Graphic Modal:

Notes on the Four Paradigms Chart

This is a custom chart created specifically for the Shifting Prism element. It is not intended to be used for other elements.

This chart requires 4 single-line text fields to be added in a specific order, as such an Instructions tab has been provided for the Graphic Modal:

Notes on the Product-Market Fit Chart

This is a custom chart created specifically for the Product-Market Fit element. It is not intended to be used for other elements.

This chart requires field to be selected and matched to specific sections of the chart. Each of these fields is in fact a field group repeater, the logic of the getProductMarketFitChartData method of the GraphicService loops through each of the field group children and extracts the appropriate values input by users.

Notes on the Product-Feature Match Chart

This is a custom chart created specifically for the Product Positioning element. It is not intended to be used for other elements.

This chart requires single-line text fields to be selected and matched to specific sections of the chart. Each of these fields are first-level children of a parent field-group repeater, the logic of the getProductFeatureMatchChartData method of the GraphicService groups field input by their current_indexes, thereby separating iterations of each field group repetition.

Notes on the Product Positioning Chart

This is a custom chart created specifically for the Product Positioning element. It is not intended to be used for other elements.

This chart requires single-line text fields to be selected and matched to specific sections of the chart. Each of these fields are first-level children of a parent field-group repeater, the logic of the getProductPositioningChartData method of the GraphicService groups field input by their current_indexes, thereby separating iterations of each field group repetition.

Notes on the What Business Are We Really In Chart

This is a custom chart created specifically for the What Business Are We In element. It is not intended to be used for other elements.

This chart requires multi-line text fields to be selected and matched to specific sections of the chart. Each of these fields are first-level elements under the Strategy tab, fields 285 and 288. The logic of the getWhatBusinessAreWeReallyInChartData method of the GraphicService groups field input by their current_indexes, thereby separating iterations of each field group repetition.

Notes on the What I derive my confidence from Chart

This is a custom chart created specifically for the Confidence element. It is not intended to be used for other elements.

This chart requires single-line text fields to be selected and matched to specific sections of the chart. Each of these fields are in a field-group element under the Strategy tab, There are 10 fields to link, 5 for strengths and 5 for skills. The logic of the getWhatIDeriveMyConfidenceFromChart method of the GraphicService groups field input by their current_indexes, thereby separating iterations of each field group repetition.

Notes on the Core competencies Chart

This is a custom chart created specifically for the Core Competencies element. It is not intended to be used for other elements.

This chart requires single-line text fields to be selected and matched to specific sections of the chart. Each of these fields are in a field-group element under the Strategy tab, There are 4 fields to link, but the user can opt to only complete three. The logic of the getCoreCompetenciesChart method of the GraphicService groups field input by their current_indexes, thereby separating iterations of each field group repetition.

Notes on the History Of Our Business Chart

This is a custom chart.

This chart requires single-line text fields to be selected and matched to specific sections of the chart. Each of these fields are in a field-group-repeater element with a maximum of 10 fields allowed. The logic of the getHistoryOfOurBusinessChartData method of the GraphicService groups field input by their element_id, thereby separating iterations of each field group repetition. Each field in the field-group-repeater element is added to the graphic as the user adds them.

Notes on the Our Values Chart

This is a custom chart.

This chart requires a combination of single-line and multi-line text fields to be selected and matched to specific sections of the chart. Each combination of these fields are in a field-group element, there are 5 field groups structured like that. The logic of the getOurValuesChartData method of the GraphicService groups field input by their current_indexes, thereby separating iterations of each field group repetition.

Notes on the Our Vision Chart

This is a custom chart.

This chart requires a multi-line text field to be selected and matched to specific section of the chart.

Notes on the Our Mission Statement Chart

This is a custom chart.

This chart requires a single-line text field to be selected and matched to a specific section of the chart.

Notes on the Our Ownership Structure Chart

This is a custom chart.

This chart requires a field-group with two single-line-text fields, a radio-button field and a number field inside a field-group-repeater. Which is displayed line by line on the chart.

Notes on the Our Top Five Direct Competitors Chart

This is a custom chart.

This chart requires a field-group with five single-line-text and five multi-line-text fields. Which is displayed line by line on the chart.

Notes on the Our Top Three Indirect Competitors Chart

This is a custom chart.

This chart requires a field-group with three single-line-text and three multi-line-text fields. Which is displayed line by line on the chart.

Notes on the Our Competitive Advantage Chart

This is a custom chart.

This chart requires a field-group with three single-line-text fields. Which is displayed line by line on the chart.

Notes on the Five Most Important Resources Chart

This is a custom chart.

This chart requires a field-group with five single-line-text fields.

Notes on the Our Target Revenue and Net Profit Chart

This is a custom chart.

This chart requires a field-group with two number fields.

Notes on the Our Problem Statement Chart

This is a custom chart.

This chart requires one multi-line-text field.

Notes on the Our Target Market Chart

This is a custom chart.

This chart requires five single-line-text fields in a field-group element for each of the four sections of the chart.

Notes on the SWOT Analysis Chart

This is a custom chart.

This chart requires three single-line-text fields in a field-group element.

Notes on the Top Three Dominant Players Chart

This is a custom chart.

This chart requires a field-group with five single-line-text fields.

Notes on the Top Three Industry Shifts Chart

This is a custom chart.

This chart requires a field-group with three single-line-text fields.

Notes on the Our Unique Selling Proposition Chart

This is a custom chart for the UPS Foothold element in the Products and Services catalogue.

This chart requires a multi-line-text field.

Notes on the Product Description Chart

This is a custom chart for the Product Description element in the Products and Services catalogue.

This chart requires a single-line-text field for the product name and a multi-line-text field for the product description, inside a field-group-repeater element.

Notes on the Product Features and Benefits Chart

This is a custom chart for the Product Features and Benefits element in the Products and Services catalogue.

This chart requires a single-line-text field for the product name and sixteen single-line-text fields for the product features and benefits, eight each, inside a field-group-repeater element.

Notes on the Key Roles In Our Business Chart

This is a custom chart for the Company Ownership Structure element in the Business Overview catalogue.

This chart requires a single-line-text field for the name and surname, and a single-line-text field for the role in the business, inside a field-group-repeater element.

Notes on the Market Differentiation Chart

This is a custom chart for the Targets And Strategic Objectives element in the Business Overview catalogue.

This chart requires a multi-line-text field for the description.

Notes on the Startup Cost Chart

This is a custom chart for the Startup Expenses element in the Financial Information catalogue.

This chart requires a single-line-text field for the cost name, and a number field for the annual cost, inside a field-group-repeater element.

Notes on the Our Unique Position in Our Industry Chart

This is a custom chart for the INDUSTRY ANALYSIS element in the, The Market catalogue.

This chart requires a multi-line-text field.

Notes on the Basic Sales Process Chart

This is a custom chart for the Sales and Marketing Process element in the Systems and Processes catalogue.

This chart requires a single-line-text field in a field-group-repeater element. The element can be repeated up to 12 times.

Notes on the Operating Expenses Chart

This is a custom chart for the Operating Expenses element in the Financial Information catalogue.

This chart requires a single-line-text field and a number field, inside a field-group-repeater element.

Notes on the Positioning and Pricing Quartile Chart

This is a custom chart for the Positioning and Pricing Strategy element in the Products and Services catalogue.

This chart requires a radio-button field with four options. Based on the selection, the chart will display one of four different graphics.

Notes on the Growth Potential in Our Industry Chart

This is a custom chart for the Industry Analysis element in the Products and Services catalogue.

This chart requires a multi-line-text field.

Notes on the Marketing Meeting Agenda Chart

This is a custom chart for the Marketing Meeting element in the Marketing Strategy catalogue.

This chart requires one or more single-line-text fields inside a field-group repeater.

Notes on the Last Things I Need To Delegate Chart

This is a custom chart for the Delegation Strategy element in the Organisational Structure catalogue.

This chart requires two field-group repeaters, one for the things I love to do and the things I am good at. Inside each repeater is a single-line-text field with a limit of five inputs per repeater.

Notes on the First Things I Need To Delegate Chart

This is a custom chart for the Delegation Strategy element in the Organisational Structure catalogue.

This chart requires two field-group repeaters, one for the things I love to do and the things I am good at. Inside each repeater is a single-line-text field with a limit of five inputs per repeater.

Notes on the Winning Statement Chart

This is a custom chart for the Winning Statement element in the Vision catalogue.

This chart requires 10 specific inputs: - Year in five years (single-line text) - Expected annual revenue target (number) - Expected people target (number) - Expected product target (number) - Expected active client target (number) - Number of countries (number) - Number of cities (number) - Number of towns (number) - Expected gross profit percentage (number) - Expected net profit percentage (number)

Notes on Our Equity Value Creation Matrix Chart

This is a custom chart for the Equity Value Matrix element in the Foundational Organisational Strategy catalogue.

This element has 4 input fields. The input comes from 4 drop-down-select-fields. Depending on what the user selects, the value must match in the graphic. The bottom value (out of 40) should be the sum of the value of the fields the user selected.

Notes on Our Most Important Challenge To Solve Chart

This is a custom chart for the Strategy Kernel element in the Foundational Organisational Strategy catalogue.

This element has one multi-line input field.

Notes on Our Top Five Obstacles To Scale Chart

This is a custom chart for the Obstacles To Scale element in the Foundational Organisational Strategy catalogue.

This element has 5 input fields. The input comes from a Multi-line-text-line-fields.

Notes on Our Organisational Purpuse Chart

This is a custom chart for the Organisational Purpose element in the Purpose catalogue.

This element has 1 input field. The input comes from a Multi-line-text-line-fields.

Notes on Selected Salary Quartile Choice Chart

This is a custom chart for the Selected Salary Quartile element in the Advanced Organisational Structure catalogue.

This element has 9 input fields. The inputs come from a drop-down-select-field and 2 single-line-text fields, for now, a year from now and 5 years from now.

Notes on Our Top Five Risks Chart

This is a custom chart for the Organisational Risk element in the Foundational Organisational Strategy catalogue.

This element has 3 input fields. The inputs come from a Single-line-text-line-fields, and 2 drop-down-select-fields inside a field-group repeater, and can be repeated a maximum of 5 times

Notes on Biggest Problem We Are Solving Chart

This is a custom chart for the Embolden Your Vision element in the Vision catalogue.

This element has 1 input field. The input comes from a Multi-line text field.

Notes on Our Moon Statement Chart

This is a custom chart for the Moon Statement element in the Purpose catalogue.

This element has 1 input field. The input comes from a Multi-line text field.

Notes on Our Philterlosophy Chart

This is a custom chart for the Philterlosophy element in the Purpose catalogue.

This element has 3 input fields. The input comes from Single-line text fields.

Notes on Our Advertising Differentiation Chart

This is a custom chart for the Advertising Differentiation element in the Advance Organisational Strategy catalogue.

This element has 6 input fields. The input comes from 6 single-text-line-fields.

Notes on Our Brand Differentiation Chart

This is a custom chart for the Brand Differentiation element in the Advance Organisational Strategy catalogue.

This element has 1 input field. The input comes from a multi-line-text-field, inside a field group.

Notes on Our Performance Promise Chart

This is a custom chart for the Performance Differentiation element in the Advance Organisational Strategy catalogue.

This element has 1 input field. The input comes from a multi-line-text-field, inside a field group, inside a field group.

Notes on Problems Our Organisation Solves Chart

This is a custom chart for the Problem We Are Solving element in the Foundational Organisational Strategy catalogue.

This element has 1 input. The inputs come from a single-line-text-field inside a field group repeater . If the “add another problem” button is clicked it should add another input below the first one with same font style, size and layout. It should only produce 4 inputs max.

Notes on Our Theory of Change Chart

This is a custom chart for the Our Theory of Change element in the Advance Organisational Strategy catalogue.

This element has 1 input field. The input comes from a Multi-line-text-field.

Notes on Our ideal business model Chart

This is a custom chart for the Ideal Business Model element in the Advance Organisational Strategy catalogue.

This element has 3 input fields. The 3 inputs comes from single-text-line-field and a number-field inside a field group repeater. With a number-field inside a field group.

Notes on Our Customer Lifetime Value Chart

This is a custom chart for the Lifetime Value element in the Customer Strategy catalogue.

This element has 1 input field. The input comes from a Calculate-field.

Notes on Our Clear parameters Chart

This is a custom chart for the Winning Statement element in the Foundational Organisational Strategy catalogue.

This element has 2 input field. The input comes from a single-line-text-field and a multi-line-text-field inside a field group.

Notes on Our Avarage Customer Acquision Cost Chart

This is a custom chart for the Customer Acquisition cost element in the Customer Strategy catalogue.

This element has 1 input field. The input comes from a calculate-field inside a field group.

Adding a new graphic type

If you are adding a new graphic type, the following areas need to be considered:

• Add the type to the GraphicTypes.php enum class. Once added the new type will be available on the GraphicForm.vue component
• Add handling for the new graphic type in the GraphicService class. This involves setting up the data structures for that graphic
• Add the graphic component and include in the CatalogueElementGraphics.vue component with a condition to show for that graphic type

Graphic types fields

Due the differing nature of graphics, they will likely require different types of fields to be added to them to visualise. For example, a bar or pie chart could only accept numerical values.

The API that retrieves the allowed fields for a given graphic type is handled in the FieldController class using the fetchFieldsForGraphics() method.

Downloading graphics

We use Browsershot to take a screenshot of the graphic and download it as a PNG file. This is handled by the BrowsershotService class and related apparatuses.