{"id":18459036,"url":"https://github.com/liatrio/react-dora-charts","last_synced_at":"2026-03-14T10:33:22.896Z","repository":{"id":255052113,"uuid":"848356005","full_name":"liatrio/react-dora-charts","owner":"liatrio","description":"This component library contains charts for the standard DORA metrics.","archived":false,"fork":false,"pushed_at":"2025-07-19T08:01:45.000Z","size":11555,"stargazers_count":26,"open_issues_count":13,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-07-19T13:18:11.459Z","etag":null,"topics":["backstage"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liatrio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-27T16:00:16.000Z","updated_at":"2025-05-28T17:26:09.000Z","dependencies_parsed_at":"2024-08-27T19:17:24.027Z","dependency_job_id":"f4d66573-6908-4349-8ef9-edd348ff3598","html_url":"https://github.com/liatrio/react-dora-charts","commit_stats":null,"previous_names":["liatrio/react-dora-charts"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/liatrio/react-dora-charts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liatrio%2Freact-dora-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liatrio%2Freact-dora-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liatrio%2Freact-dora-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liatrio%2Freact-dora-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liatrio","download_url":"https://codeload.github.com/liatrio/react-dora-charts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liatrio%2Freact-dora-charts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265965978,"owners_count":23857055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backstage"],"created_at":"2024-11-06T08:21:29.704Z","updated_at":"2026-03-14T10:33:22.838Z","avatar_url":"https://github.com/liatrio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React DORA Charts\n\n[![CodeQL](https://github.com/liatrio/react-dora-charts/actions/workflows/codeql.yml/badge.svg)](https://github.com/liatrio/react-dora-charts/actions/workflows/codeql.yml) [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![Release](https://github.com/liatrio/react-dora-charts/actions/workflows/release.yml/badge.svg?branch=main)](https://github.com/liatrio/react-dora-charts/actions/workflows/release.yml) ![GitHub top language](https://img.shields.io/github/languages/top/liatrio/react-dora-charts)\n\nThis component library contains charts for the standard DORA metrics.\n\n## Installation\n\nYou can install these components using the following command:\n\n```sh\nnpm install @liatrio/react-dora-charts\n```\n\nOr\n\n```sh\nyarn add @liatrio/react-dora-charts\n```\n\n## Usage\n\nTo use these charts, you can do as follows:\n\n```js\nimport { DeploymentFrequency, fetchData } from `@liatrio/react-dora-charts`\n...\nconst fetchedData = fetchData(fetchProps, onSuccess, onFailure)\n...\n\u003cdiv style={{width: \"600px\", height: \"400px\"}}\u003e\n \u003cDeploymentFrequencyGraph data={fetchedData} /\u003e\n\u003c/div\u003e\n\n```\n\nIt is important that the chart component be wrapped in an element of some size somewhere up the tree, otherwise the chart may have unexpected behavior.\n\n## Exposed Components\n\n### `Board`\n\nThis is a component to display an At a Glance board for the 4 DORA Metrics and can be setup to either display trends or color coded scores.\n\n![Board](/screenshots/board_hover.png?raw=true 'Board')\n\n![Board with details](/screenshots/board_with_details.png?raw=true 'Board with details')\n\n![Board with trends](/screenshots/board_with_trends.png?raw=true 'Board with trends')\n\n### `DeploymentFrequencyGraph`\n\nThis is a component to display a graph of your deployments over the specified time period.\n\n![DeploymentFrequency](/screenshots/deployment_frequency.png?raw=true 'DeploymentFrequency')\n\n### `ChangeLeadTimeGraph`\n\nThis is a component to display a graph of your change lead time over the specified time period.\n\n![Change Lead Time](/screenshots/change_lead_time.png?raw=true 'Change Lead Time')\n\n### `ChangeFailureRateGraph`\n\nThis is a component to display a graph of your change failure rate over the specified time period.\n\n![Change Failure Rate](/screenshots/change_failure_rate.png?raw=true 'Change Failure Rate')\n\n### `RecoverTimeGraph`\n\nThis is a component to display a graph of your recover time over the specified time period.\n\n![Recover Time](/screenshots/recover_time.png?raw=true 'Recover Time')\n\n### `TrendGraph`\n\nThis is a component to display the overall trend of the data supplied.\n\n![Overall Trend](/screenshots/trend_overall.png?raw=true 'Overall Trend')\n\n![Overall Trend with individual Metric Trends](/screenshots/trend_with_metrics.png?raw=true 'Overall Trend with individual Metric Trends')\n\n### `TrendIndicator`\n\nThis component is a trend indicator you can use to display in parent components.\n\n## Exposed Functions\n\n### `fetchData`\n\nUse this function to create the `data` parameter for the components.\n\nThis function takes a (`FetchProps`) object with the following properties.\n\n| Field | Required | Description |\n| ------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `api` | true | This is the url to the API for gathering data. |\n| `getAuthHeaderValue` | false | This is a function that should provide the value of the `Authorization` HTTP Header for the `api`.\u003cbr\u003eIf not specified, no auth will be used. |\n| `team` | false | The name of the team to show pull data for. |\n| `repositories` | false | A list of repository names to pull data for. |\n| `daysToPull` | false | The number of days in the past from the current date to pull data for\u003cbr\u003eIf not specified, 365 is the default. |\n| `includeWeekendsInCalculations` | false | When calculating the averages for each metric in the `Board` component, this setting allows you to include/exclude weekends in those calculations.\u003cbr\u003eThis is useful when you don't have teams that work weekends. |\n| `holidays` | false | This field allows you to specify holidays that your organization follows to exclude from the calculations for the `Board` component. |\n\n### `buildDoraStateForPeriod`\n\nThis function returns a `DoraState` object with information about each DORA Metric.\n\nIt takes the following values as parameters:\n\n| Parameter | Description |\n| --------- | ---------------------------------------------------------------------- |\n| `props` | An object containing the [Component Properties](#component-properties) |\n| `data` | The data supplied by the `fetchData` function |\n| `start` | The start date of the period you want to know the trend for |\n| `end` | The end date of the period you want to know the trend for |\n\nTo get the trend value, the evaluation will use the previous period of the same length against your request period.\n\nThe `DoraState` object that is returned contains the following for each metric:\n\n| Field | Description |\n| --------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n| `average` | The average of the metric of the supplied time frame. |\n| `display` | A formatted display string for `average` field including a postfix of hrs, days, mins, or % depending on the metric and time scale. |\n| `color` | The color for the displays string based on the `colors` supplied in the component properties. |\n| `trend` | Whether this period measured is improving, falling behind, or staying even with the requested period. |\n| `rank` | An enum of `Rank` that provides whether you are elite, high, medium, low or unknown for this metric. |\n\n### `getDateDaysInPast` and `getDateDaysInPastUtc`\n\nThese functions are just shortcuts to get a Date a certain number of days in the past\n\n## Component Properties\n\n### Graph Component Properties\n\n| Property | Required | Description |\n| ------------------------------- | :------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `data` | true | An array of `DoraRecord` objects used to display the graphs. |\n| `graphStart` | false | If not supplied this will default to 30 days in the past.\u003cbr\u003eThis value is used to determine the starting date for the charts. |\n| `graphEnd` | false | If not supplied, this will default to 1 day in the past.\u003cbr\u003eThis value is used to determine the ending date for the charts. |\n| `loading` | false | Boolean to allow a container component to control the loading status as it waits to supply `data`. |\n| `includeWeekendsInCalculations` | false | When calculating the averages for each metric, this setting allows you to include/exclude weekends in those calculations.\u003cbr\u003eThis is useful when you don't have teams that work weekends. |\n| `metricThresholdSet` | false | This allows you to customize the metric thresholds used for determining the rank of each metric. You only have to override the ones you need. There are defaults based on the official DORA Report that are used when these are not supplied.\u003cbr\u003eThis takes in a `MetricThresholdSet` object which contains a `MetricThresholds` object for each metric.\u003cbr\u003eThe threshold values for `elite`, `high` and `medium` are measured in hours. `low` is considered anything longer than medium, so it is not able to be supplied as a value in this object. |\n| `message` | false | This allows a parent component to display a custom message while it does something. This setting overrides `loading` and the no data state that happens if `data` is empty or the `api` returns no data. |\n| `holidays` | false | This field allows you to specify holidays that your organization follows to exclude from the calculations for the components. |\n| `theme` | false | This field allows you to supply the `Theme` (dark, light) to the chart for styling purposes. You can alternatively just make sure that `data-theme='light\\|dark'` is used on an ancestor of the component. |\n\n### Board Component Properties\n\n- All the `Common Properties`\n\n| Property | Required | Description |\n| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| `alwaysShowDetails` | false | This field controls whether the `Board` component shows the details on hover or statically below the icon. |\n| `showTrends` | false | This field controls whether trends or rank base coloring is shown in the `Board` component. |\n| `hideColors` | false | This allows you to change the `Board` component to hide the rank based coloring on the icons and instead just use a shade of purple. |\n\n### Trend Component Properties\n\n- All the `Common Properties`\n\n| Property | Required | Description |\n| ---------------------- | -------- | --------------------------------------------------------------------------------------------------------------- |\n| `showIndividualTrends` | false | Enabling this property will show a line for each individual metric trend in addition to the overall DORA trend. |\n\n### TrendIndicator Component Properties\n\n| Property | Required | Description |\n| -------- | -------- | -------------------------------------------------------------------- |\n| `trend` | true | This is a `Trend` enum value that controls what is displayed inside. |\n\n## Dependencies\n\nThese components rely on `data` being supplied to them. We supply the [liatrio-dora-api](https://github.com/liatrio/liatrio-dora-api) to gather this data out of a Loki DB that is fed by our [liatrio-otel-collector](https://github.com/liatrio/liatrio-otel-collector). If you want to create your own API, it just needs to return the [Data Schema](#data-schemas).\n\nWe also expose the `fetchData` function to fetch this data for you and do some preprocessing of the data before sending it into the components. If you would like to use your own function you will need to examine the preprocessing done by this function and replicate it for yours.\n\n## Data Schemas\n\nThe data schema for each chart is as follows:\n\n```schema\n{\n records: [{\n repository: string\n team: string\n title?: string\n user?: string\n sha: string\n status: boolean\n failed_at?: Date\n merged_at?: Date\n created_at: Date\n fixed_at?: Date\n deploy_url: string\n fixed_url?: string\n change_url: string\n issue_url?: string\n }, ...]\n}\n```\n\n## Development\n\nThe following commands are available for development:\n\n| Command | Description |\n| ----------------------------------------- | ------------------------------------------------------------------------------------------ |\n| `task test` | Runs the test suite. |\n| `task playwright` | Runs the full Playwright test suite. |\n| `task playwright:smoke-test` | Runs a subset of the tests.\u003cbr\u003eUseful for debugging. |\n| `task playwright:show-report` | Shows the most recent test report.\u003cbr\u003eCan be used to view reports for test run via Docker. |\n| `task playwright:update-snapshots` | Updates the snapshots. See [note about docker usage](#note-about-docker-usage). |\n| `task playwright:docker:build` | Builds the Docker image. |\n| `task playwright:docker` | Runs the tests in a Docker container. |\n| `task playwright:docker:install` | Install dependencies in the Docker container. |\n| `task playwright:docker:update-snapshots` | Updates the snapshots using Docker. |\n| `task storybook` | Starts Storybook development server. |\n| `task build-storybook` | Builds the static Storybook site. |\n| `task prettier:check` | Checks code formatting. |\n| `task prettier:fix` | Fixes code formatting issues. |\n| `task build` | Builds the project. |\n| `task tsc:full` | Runs full TypeScript compilation. |\n\n## Testing\n\n### Unit Tests\n\nBasic unit tests can be found in the [tests](./tests/) directory. They can be run with `task test`\n\n### Visual Diffs via Playwright\n\nThis project includes visual diff tests that are run via Playwright. They are used to ensure that the components are functioning and displaying correctly. Each component has its own set of visual diff tests that test the functionality of that component.\n\n| File | Description |\n| ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |\n| [playwright.config.js](./playwright/playwright.config.js) | This file contains the configuration for the Playwright tests. |\n| [playwright/test_parameters.yaml](./playwright/test_parameters.yaml) | This file contains the test parameters. |\n| [playwright/playwright.dockerfile](./playwright/playwright.dockerfile) | This Dockerfile is used to build a Docker image for running the Playwright tests. |\n| [playwright/tests/components.test.js](./playwright/tests/components.test.js) | This file contains the main test logic. |\n| [playwright/helpers/utils.js](./playwright/helpers/utils.js) | This file contains utility functions used by the tests. |\n| [playwright/helpers/constants.js](./playwright/helpers/constants.js) | This file contains constants used by the tests. |\n\nTo run the Playwright tests, use the following commands:\n\n| Command | Description |\n| ----------------------------------------- | ------------------------------------------------------------------------------------------ |\n| `task playwright` | Runs all the tests. See [note about docker usage](#note-about-docker-usage). |\n| `task playwright:smoke-test` | Runs a subset of the tests.\u003cbr\u003eUseful for debugging. |\n| `task playwright:show-report` | Shows the most recent test report.\u003cbr\u003eCan be used to view reports for test run via Docker. |\n| `task playwright:update-snapshots` | Updates the snapshots. See [note about docker usage](#note-about-docker-usage). |\n| `task playwright:docker:build` | Builds the Docker image. |\n| `task playwright:docker` | Runs the tests in a Docker container. |\n| `task playwright:docker:update-snapshots` | Updates the snapshots in a Docker container. |\n\nYou can also run a subset of the tests using tags, for example:\n\n```sh\nnpx playwright test --grep @component-board\nnpx playwright test --grep @dataset-low\n```\n\n#### Note about updating snapshots\n\n⚠️ Be extra cautious when updating snapshots. Any changes to the snapshots need to be manually reviewed for accuracy before committing them.\n\n#### Note about Docker usage\n\nTo ensure consistency in the snapshots across different machines (local dev vs. CI), the Playwright tests are run in a Docker container. Running the tests locally is useful for creating and debugging, but all snapshots should be updated via the `task playwright:docker:update-snapshots` command.\n\n## Contributing\n\nSee [Contributing to React Dora Charts](./CONTRIBUTING).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatrio%2Freact-dora-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliatrio%2Freact-dora-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatrio%2Freact-dora-charts/lists"}