[Dashboards] Graph gauge chart component (#14035)

closes https://github.com/twentyhq/core-team-issues/issues/1374
figma -
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=72808-199932&t=C0BfdTmTl69RKZvU-0

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
This commit is contained in:
nitin
2025-08-22 13:05:47 +05:30
committed by GitHub
parent 953f1e7207
commit 9e9fa6325f
9 changed files with 799 additions and 62 deletions
@@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import type { Point } from '@nivo/line';
import type { Point, LineSeries } from '@nivo/line';
import { type ReactElement } from 'react';
const StyledTooltipContainer = styled.div`
@@ -45,7 +45,7 @@ const StyledTooltipValue = styled.span`
type WorkerMetricsTooltipProps = {
slice: {
points: readonly Point[];
points: readonly Point<LineSeries>[];
};
};
@@ -55,11 +55,11 @@ export const WorkerMetricsTooltip = ({
return (
<StyledTooltipContainer>
{slice.points.map((point) => (
<StyledTooltipItem key={point.id} color={point.serieColor}>
<StyledTooltipColorCircle color={point.serieColor} />
<StyledTooltipItem key={point.id} color={point.seriesColor}>
<StyledTooltipColorCircle color={point.seriesColor} />
<StyledTooltipDataRow>
<span>{point.serieId}</span>
<StyledTooltipValue>{String(point.data.y)}</StyledTooltipValue>
<span>{point.seriesId}</span>
<StyledTooltipValue>{point.data.yFormatted}</StyledTooltipValue>
</StyledTooltipDataRow>
</StyledTooltipItem>
))}