Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 13x 13x 13x 13x 13x 13x 13x 3x 13x 3x 3x 3x 6x 3x 3x 3x 4x 3x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React, { useMemo } from 'react'
import HighchartsReact from 'highcharts-react-official'
import Highcharts from 'highcharts'
import { Layout, Text } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import { merge } from 'lodash-es'
interface PieChartItem {
label: string
value: number
formattedValue?: string
color?: Color
}
export interface PieChartProps {
items: PieChartItem[]
size: number
options?: Highcharts.Options
showLabels?: boolean
showInRevOrder?: boolean
customCls?: string
labelContainerStyles?: string
labelStyles?: string
labelsContent?: React.ReactElement
}
const getParsedOptions = (defaultOptions: Highcharts.Options, options: Highcharts.Options): Highcharts.Options =>
merge(defaultOptions, options)
export const PieChart: React.FC<PieChartProps> = props => {
const {
size,
items,
options = {},
showLabels = true,
labelContainerStyles = '',
labelStyles = '',
showInRevOrder,
customCls,
labelsContent
} = props
const defaultOptions: Highcharts.Options = useMemo(
() => ({
chart: {
type: 'pie',
width: size,
height: size,
margin: [0, 0, 0, 0],
spacing: [0, 0, 0, 0]
},
title: {
text: ''
},
credits: { enabled: false },
tooltip: {
useHTML: true,
padding: 4,
outside: true,
formatter: function () {
const { point } = this as { point: { name: string; y: number } }
return `${point.name}: ${point.y}`
}
},
plotOptions: {
pie: {
size,
dataLabels: {
enabled: false
},
states: {
hover: {
halo: null
}
}
}
},
series: [
{
animation: false,
type: 'pie',
colorByPoint: true,
data: items.map(item => ({
name: item.label,
y: item.value,
color: item.color
})),
cursor: 'pointer'
}
]
}),
[size, items]
)
const parsedOptions = useMemo(() => getParsedOptions(defaultOptions, options), [defaultOptions, options])
const className = showInRevOrder ? customCls : ''
const labelHtml = labelsContent ? (
labelsContent
) : (
<Layout.Vertical
flex={{ alignItems: 'flex-end' }}
height="100%"
padding={{ top: 'xsmall', bottom: 'xsmall', right: 'large' }}
className={labelContainerStyles}
>
{items.map(({ label, formattedValue, value }) => (
<Text font={{ size: 'xsmall' }} color={Color.GREY_500} className={labelStyles} key={label}>{`${label} (${
formattedValue ? formattedValue : value
})`}</Text>
))}
</Layout.Vertical>
)
return (
<Layout.Horizontal
flex={{ align: 'center-center', distribution: 'space-between' }}
height={'100%'}
className={className}
>
{showLabels ? labelHtml : <></>}
<HighchartsReact highcharts={Highcharts} options={parsedOptions}></HighchartsReact>
</Layout.Horizontal>
)
}
|