aboutsummaryrefslogtreecommitdiffstats
path: root/server/sonar-web/design-system/src/components/DonutChart.tsx
blob: 883b258c7144bfe3e7fcc13e437f148928057d1d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/*
 * SonarQube
 * Copyright (C) 2009-2023 SonarSource SA
 * mailto:info AT sonarsource DOT com
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
import { arc as d3Arc, pie as d3Pie, PieArcDatum } from 'd3-shape';

interface DataPoint {
  fill: string;
  value: number;
}

export interface DonutChartProps {
  data: DataPoint[];
  height: number;
  padAngle?: number;
  padding?: [number, number, number, number];
  thickness: number;
  width: number;
}

export function DonutChart(props: DonutChartProps) {
  const { height, padding = [0, 0, 0, 0], width } = props;

  const availableWidth = width - padding[1] - padding[3];
  const availableHeight = height - padding[0] - padding[2];

  const size = Math.min(availableWidth, availableHeight);
  const radius = Math.floor(size / 2);

  const pie = d3Pie<any, DataPoint>()
    .sort(null)
    .value((d) => d.value);

  if (props.padAngle !== undefined) {
    pie.padAngle(props.padAngle);
  }

  const sectors = pie(props.data).map((d, i) => {
    return (
      <Sector
        data={d}
        fill={props.data[i].fill}
        key={i}
        radius={radius}
        thickness={props.thickness}
      />
    );
  });

  return (
    <svg className="donut-chart" height={height} role="img" width={width}>
      <g transform={`translate(${padding[3]}, ${padding[0]})`}>
        <g transform={`translate(${radius}, ${radius})`}>{sectors}</g>
      </g>
    </svg>
  );
}

interface SectorProps {
  data: PieArcDatum<DataPoint>;
  fill: string;
  radius: number;
  thickness: number;
}

function Sector(props: SectorProps) {
  const arc = d3Arc<any, PieArcDatum<DataPoint>>()
    .outerRadius(props.radius)
    .innerRadius(props.radius - props.thickness);
  const d = arc(props.data) as string;
  return <path d={d} style={{ fill: props.fill }} />;
}