feat(model-ad): create typescript charts library and angular wrapper library, add boxplot chart

[hallieswan]

Description

Creates a new typescript charts library and an angular wrapper library. Adds a new boxplot chart using Apache ECharts.

Related Issues

• AG-1073
• AG-1085
• AG-1439

Changelog

• Add shared typescript charts library -- shared-typescript-charts
  • Initially generated with nx g @nx/js:library shared-typescript-charts --bundler=tsc --unitTestRunner=jest --testEnvironment=jsdom --directory=libs/shared/typescript/charts --projectNameAndRootFormat=as-provided, but required changes to tsconfig.base.json, .eslintrc.json, and project.json to align with monorepo setup
  • Add new boxplot chart that uses Apache ECharts to:
  • Display 1+ points per category
  • Offset points to prevent overlap of categories
  • Change color and shape of points by category
  • Optionally display tooltips for each point and on each x-axis label
  • Display precomputed (static) boxplot summaries or calculate dynamic boxplot summaries based on provided points

• Add shared angular library that wraps the charts library -- shared-typescript-charts-ngx

  • Created by copying shared-typescript-util library, then updating the library name
  • Add boxplot directive that wraps typescript boxplot chart for use in Angular apps

    nx g @nx/angular:directive boxplot --directory=/libs/shared/typescript/charts-ngx/src/lib/boxplot

  • Add Storybook to showcase charts

  # add storybook to sage-monorepo
  nx add @nx/storybook
  
  # add storybook to shared-typescript-charts-ngx project
  nx g @nx/angular:storybook-configuration shared-typescript-charts-ngx --interactionTests=false --generateStories=true --configureStaticServe=true

  • Add testing-library and jest-dom to simplify testing

    yarn add --dev @testing-library/angular
    yarn add --dev @testing-library/jest-dom

Preview

Agora style boxplot

Static summaries, 1 point per boxplot:

https://github.com/Sage-Bionetworks/sage-monorepo/assets/26949006/99007b90-a468-44fc-b7da-30cf5b227a72

Model-AD style boxplot

1+ point per boxplot separated by category:

https://github.com/Sage-Bionetworks/sage-monorepo/assets/26949006/83f7d69c-063a-469a-9886-7a30c5394127

Dynamically calculated summaries:

https://github.com/Sage-Bionetworks/sage-monorepo/assets/26949006/fa2604d5-045b-4292-99d0-4f1ddf2237f3

[hallieswan]

Rebased to resolve merge conflict and added jittering of points within categories:

https://github.com/Sage-Bionetworks/sage-monorepo/assets/26949006/7ab36cce-91b2-4935-b6f4-4bda64da91c6