{"id":35398,"date":"2026-03-30T09:07:55","date_gmt":"2026-03-30T09:07:55","guid":{"rendered":"https:\/\/streamhub.co.uk\/?p=35398"},"modified":"2026-03-30T09:28:43","modified_gmt":"2026-03-30T09:28:43","slug":"architecting-scalable-chart-modules-in-streamhub-analytics-part-ii-strategy-factory-patterns","status":"publish","type":"post","link":"https:\/\/streamhub.co.uk\/architecting-scalable-chart-modules-in-streamhub-analytics-part-ii-strategy-factory-patterns\/","title":{"rendered":"Architecting Scalable Chart Modules in Streamhub Analytics: Part II \u2013 Strategy & Factory Patterns"},"content":{"rendered":"Reading Time: <\/span> 4<\/span> minutes<\/span><\/span>

[et_pb_section fb_built=”1″ _builder_version=”4.16″ da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_row _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.27.0″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”]<\/p>\n

\n
\n
\n
\n
\n
\n
\n
In the previous post<\/a>, we introduced the architectural challenges behind supporting multiple chart types within a scalable dashboard solution. We established that different visualisation libraries require data in different structural formats. This mismatch makes the transformation layer a critical part of the architecture.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

In this post, we focus on how the system decides which<\/em> transformation logic to apply for a given chart type. Two design patterns make this possible: Strategy<\/strong> and Factory<\/strong>. Together, they allow us to select and execute the correct transformation algorithm at runtime without introducing tight coupling or complex conditionals.<\/p>\n

\u00a0<\/h2>\n

Strategy Pattern: Chart-Specific Data Transformations<\/strong><\/h2>\n

The Strategy pattern allows us to define a family of algorithms (transformations), encapsulate each one, and make them interchangeable. In our chart module, each chart type has its own transformation strategy responsible for converting raw report data into a format suitable for the rendering library.<\/p>\n

\u00a0<\/h3>\n

Structure<\/strong><\/h3>\n

The implementation revolves around a contract interface that defines two key methods:<\/p>\n

\/\/ Interface defining the strategy contract<\/span> \n<\/span>export<\/span> interface<\/span> IChartDataTransformer<\/span> \n{<\/span> <\/span> \n  \/** <\/span><\/span> \n  * Determines if this transformer supports the given chart type. <\/span> \n  * Each transformer checks if it can handle the visualization type. <\/span> \n  *\/<\/span> <\/span> \n  supports<\/span>(<\/span>chartType:<\/span> string<\/span>)<\/span>:<\/span> boolean<\/span>;<\/span> <\/span> \n \n  \/** <\/span><\/span> \n  * Transforms raw report data into chart-specific format. <\/span> \n  * Each transformer implements its own transformation algorithm. <\/span> \n  *\/<\/span> <\/span> \n  transform<\/span>(<\/span>reportData:<\/span> any<\/span>,<\/span> chartType?<\/span>:<\/span> string<\/span>,<\/span> report?<\/span>:<\/span> any<\/span>)<\/span>:<\/span> any<\/span>;<\/span> \n<\/span>}<\/span><\/span><\/pre>\n
Each chart transformer implements this interface:<\/p>\n
@Injectable({ providedIn: 'root' })\nexport class BarChartTransformer implements IChartDataTransformer {\n  supports(chartType: string): boolean {\n    \/\/ Returns true for bar chart type identifiers\n  }\n\n  transform(reportData: any): any[] {\n    \/\/ Analyzes dimensions and metrics\n    \/\/ Normalizes data structure\n    \/\/ Applies color mapping\n    \/\/ Enriches with metadata\n    \/\/ Returns chart library-compatible format\n  }\n}<\/pre>\n
\u00a0<\/h3>\n
What Each Strategy Handles<\/strong><\/h3>\n
Each transformation strategy encapsulates logic specific to a chart type. This includes:<\/p>\n