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 | 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 3x 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 from 'react'
import cx from 'classnames'
import { Classes, PopoverInteractionKind, Position } from '@blueprintjs/core'
import { Icon, Layout, Popover, Text } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import { SparklineChart, SparklineChartProps } from '@common/components/SparklineChart/SparklineChart'
import { numberFormatter } from '@cd/components/Services/common'
import css from '@cd/components/TrendPopover/TrendPopover.module.scss'
export interface TrendPopoverProps {
title?: string
data: SparklineChartProps['data']
}
const Trend: React.FC<TrendPopoverProps> = props => {
const { title, data } = props
return (
<Layout.Vertical padding={{ left: 'medium', right: 'medium', top: 'xsmall', bottom: 0 }} width={676} height={200}>
<Layout.Horizontal flex={{ distribution: 'space-between', align: 'center-center' }} margin={{ bottom: 'xsmall' }}>
<Text color={Color.GREY_600} font={{ weight: 'semi-bold' }}>
{title}
</Text>
<Icon name="cross" size={16} className={cx(Classes.POPOVER_DISMISS, css.hover)} />
</Layout.Horizontal>
<SparklineChart
data={data}
options={{
chart: { width: 646, height: 155 },
plotOptions: {
series: {
marker: {
enabled: true
},
dataLabels: {
enabled: true,
color: 'var(--grey-600)',
formatter: /* istanbul ignore next */ function () {
return numberFormatter(this.y ? this.y : 0)
}
}
}
}
}}
sparklineChartContainerStyles={css.sparklineChartContainerStyles}
/>
</Layout.Vertical>
)
}
export const TrendPopover: React.FC<TrendPopoverProps> = props => {
const { title, data, children } = props
return (
<Popover interactionKind={PopoverInteractionKind.CLICK} position={Position.RIGHT}>
{children}
<Trend title={title} data={data} />
</Popover>
)
}
|