A small Angular application that compares reference medium formulation against an optimised formulation using Apache ECharts

• Absolute mode with raw concentration values
• Relative mode with optimised / reference
• Dashed reference baseline at y = 1
• Gaps between compound groups
• Responsive layout
• Empty state if no components
• Tooltips with compound name, value and unit

• Angular
• TypeScript
• SCSS
• Apache ECharts
• ngx-echarts
• Vitest

npm install

To start a local development server, run:

npm start

Once the server is running, open your browser and navigate to http://localhost:4200/.

To build the project run:

npm run build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

To execute unit tests with the Vitest test runner, use the following command:

npm test

Solution separates:

• domain and chart models
• a pure buildChartData() transformation function
• a reusable MediumChart component
• mode selection in the root component

The transformation function is covered by unit tests for absolute values, relative calculations and gap entries.

• Provided dataset contains mixed units (g/L and mmol/L). Following the specification raw values are shown on one axis and each compound's unit is displayed in the tooltip.
• Relative values are unitless, so units are omitted in relative mode.
• If a reference value is 0 the relative value represented as null because ratio is undefined.
• Gap entries are implemented as empty categories with null values.