mirror of
https://github.com/bitwarden/clients.git
synced 2026-06-13 21:01:11 +08:00
bfb47cc9da
* [PM-27772] Add TrendWidget component with Chart.js implementation (#19078) Add reusable TrendWidget component with Chart.js line chart for displaying risk trends over time in Access Intelligence. - Configurable datetime/linear x-axis scales - Theme-aware colors from design system (brand-700/400, gray-200/600) - Full i18n support (10 new translation keys) - Loading spinner and error state handling - Proper Chart.js lifecycle management * [PM-28530] Implement period selector UI component (#19162) * feat(dirt): define TimePeriod type for risk-over-time period selector Add const object type for 5 time periods (month, 3mo, 6mo, 12mo, all) following ADR-0025 no-enum pattern. Includes PeriodOption interface and PERIOD_OPTIONS config for rendering. [PM-28530] * feat(dirt): create PeriodSelectorComponent using bit-menu Custom trigger button with bit-menu dropdown for risk-over-time time period selection. No clear button, neutral styling matching Figma design. Check icon marks current selection. [PM-28530] * feat(dirt): add barrel export for period selector [PM-28530] * feat(dirt): add i18n strings for period selector options Add translation keys for time period labels: pastMonth, last3Months, last6Months, last12Months, and timePeriod placeholder. [PM-28530] * feat(dirt): add Storybook stories for PeriodSelectorComponent Stories for default state, pre-selected 3 months, and disabled state. [PM-28530] * test(dirt): add unit tests for PeriodSelectorComponent Tests cover default state, period options with pre-translated labels, selection changes, and selected label reactivity. [PM-28530] * feat(dirt): integrate PeriodSelector into TrendWidget component Replace placeholder with dirt-period-selector dropdown. Add TimePeriod to TrendWidgetTimespan mapping layer to bridge the two type systems. Remove standalone Storybook story and disabled input per review feedback — component now lives inside TrendWidget, not standalone. [PM-28530] * refactor(dirt): replace model() with signal() + output() for PeriodSelector Switch from Angular's model() API to the signal() + output() pattern used throughout the Access Intelligence module. This matches the existing convention in TrendWidget (selectedTimespan/timespanChanged), app-table-row-scrollable (checkboxChange/selectAllChange), and review-applications-view (onToggleSelection/onToggleAll). Changes: - Replace model<TimePeriod>() with signal<TimePeriod>() for internal state - Add explicit selectedPeriodChange output for parent notification - Manual .emit() in selectPeriod() to match module convention - Update test to verify output emission via subscribe spy No functional change — both patterns emit selectedPeriodChange events. The template binding (selectedPeriodChange)="..." is unchanged. * refactor(dirt): update labels to match Figma and unify type system Update period selector labels per Figma design: - "Last 3 months" → "Past 3 months" (past3Months) - "Last 6 months" → "Past 6 months" (past6Months) - "Last 12 months" → "Past year" (pastYear) - "All" → "All time" (allTime, new key — pre-existing "all" key untouched) Rename TimePeriod const keys to match labels: - Last3Months → Past3Months - Last6Months → Past6Months - Last12Months → PastYear - All → AllTime Wire values unchanged ("month", "3mo", "6mo", "12mo", "all") to preserve server API compatibility. Remove TrendWidgetTimespan entirely — TrendWidget now uses TimePeriod directly for signals, outputs, and data model. Eliminates the temporary mapping layer (timePeriodMap + onPeriodSelectorChange). Period selector wires directly to onTimespanChange(). [PM-28530] * [PM-28533] Add view selector to TrendWidget component (#19163) Adds the view selector button group to the TrendWidget component. Hooks up to existing signal and emits events when the view mode is changed. In future development, the parent component of TrendWidget will need to handle these events to fetch updated chart data from the API. View options are: Applications Passwords Members * Fix TimePeriod type errors in TrendWidget stories (#19239) Replace invalid "past-month" string literals with TimePeriod.PastMonth constant to match the TimePeriod type definition. The TimePeriod const object uses "month" as the value for PastMonth, not "past-month". * [PM-32056] Add feature flag for access intelligence trend chart (#19164) * feat(dirt): add feature flag for access intelligence trend chart Register the `pm-26961-access-intelligence-trend-chart` feature flag to gate the upcoming TrendChart widget in the Activity tab. Default is FALSE (disabled). PM-32057 will consume this flag when wiring up the widget component. [PM-32056] * feat(dirt): read trend chart feature flag in activity component Inject ConfigService into AllActivityComponent and read the AccessIntelligenceTrendChart flag on init. This prepares the component for the TrendChart widget to be conditionally rendered. [PM-32056] * feat(dirt): add conditional wrapper for trend chart widget Add an @if block gated by the AccessIntelligenceTrendChart feature flag in the Activity tab template. The TrendChart widget will be placed inside this block when wired up. [PM-32056] * reset package files to main * install chartjs using node v22 * add chartjs to dirt team deps (#19244) * [PM-32055] Download TrendWidget chart to PNG and CSV (#19245) This PR adds a download button to the TrendWidget component that supports downloading the "Risk over time" chart data as a PNG or in CSV format. Logic to dynamically add a chart title and x/y axis labels is included. This required creating a service that recreates a copy of the chart with title and axis labels applied, in an off screen canvas element, and then exporting to blob for file download. This logic is owned by the ChartExportService. * Fix readonly variables. Update chart variable to use signal * Fix any type in test file --------- Co-authored-by: Brad <44413459+lastbestdev@users.noreply.github.com> Co-authored-by: Alex <55413326+AlexRubik@users.noreply.github.com> Co-authored-by: Brad Deibert <bdeibert@bitwarden.com> |
||
|---|---|---|
| .. | ||
| .vscode | ||
| config | ||
| scripts | ||
| spec | ||
| src | ||
| store | ||
| webpack | ||
| .gitignore | ||
| CLAUDE.md | ||
| crowdin.yml | ||
| jest.config.js | ||
| package.json | ||
| postcss.config.js | ||
| project.json | ||
| README.md | ||
| tailwind.config.js | ||
| test.setup.ts | ||
| tsconfig.json | ||
| tsconfig.spec.json | ||
| webpack.base.js | ||
| webpack.config.js | ||
Bitwarden Browser Extension
The Bitwarden browser extension is written using the Web Extension API and Angular.
Documentation
Please refer to the Browser section of the Contributing Documentation for build instructions, recommended tooling, code style tips, and lots of other great information to get you started.