tracker/frontend/src/Doughnut.js at result-processor-pubsub · LearningAzure2020/tracker · GitHub

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React from 'react'
import { object, arrayOf, number, string, func } from 'prop-types'
import { Box } from '@chakra-ui/core'
import { scaleOrdinal } from 'd3'
import { useArcs } from './useArcs'
import { ZigZag, CrossHatch, Dots, Stripes } from './patterns'

export const Doughnut = ({
  data,
  color,
  height,
  width,
  title,
  valueAccessor = (d) => d,
  innerRadius = Math.ceil(width / 3.5),
  outerRadius = Math.ceil(width / 2.2),
  padAngle = 0.05,
  children,
  ...rest
}) => {
  const arcs = useArcs({
    innerRadius,
    outerRadius,
    padAngle,
    data,
    valueAccessor,
  })

  const patterns = scaleOrdinal().range([
    `url(#dots)`,
    color,
    `url(#stripes)`,
    `url(#crosshatch)`,
    `url(#zigzag)`,
  ])

  return (
    <div {...rest}>
      <svg height={height} width={width}>
        <title>{title}</title>
        <defs>
          <ZigZag width={0.4} background="#575766" color="#fff" />
          <Dots size={1} background="#575766" color="#fff" />
          <Stripes angle={45} background="#575766" color="#fff" />
          <CrossHatch width={0.8} background="#575766" color="#fff" />
        </defs>
        <g transform={`translate(${width / 2},${height / 2})`}>
          {arcs.map((arc, index) => {
            return children(
              { d: arc.d, fill: patterns(index / data.length - 1) },
              index,
            )
          })}
        </g>
      </svg>

      {arcs.map(({ title, count, percentage }, index) => {
        return (
          <Box key={`legend:${index}`} backgroundColor="primary">
            <svg
              height={30}
              width={30}
              style={{ display: 'inline', marginRight: '1em' }}
            >
              <g>
                <rect
                  stroke="#fff"
                  strokeWidth="2"
                  width="30"
                  height="30"
                  fill={patterns(index / data.length - 1)}
                />
              </g>
            </svg>
            <p
              style={{
                color: '#fff',
                fontWeight: 'bold',
                backgroundColor: '#2e2e40',
                display: 'inline',
              }}
            >
              {`${title}: ${count} - ${percentage}% `}
            </p>
          </Box>
        )
      })}
    </div>
  )
}

Doughnut.propTypes = {
  data: arrayOf(object),
  title: string,
  color: string,
  children: func,
  height: number,
  width: number,
  innerRadius: number,
  outerRadius: number,
  padAngle: number,
  valueAccessor: func,
}

export const Segment = ({ d, fill, ...rest }) => {
  return <path d={d} fill={fill} {...rest} />
}

Segment.propTypes = {
  fill: string,
  d: string,
}