colramos-amd
91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
// ################################################################################
|
|
// # Copyright (c) 2020 ACE IoT Solutions LLC
|
|
// #
|
|
// # Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
// # of this software and associated documentation files (the "Software"), to deal
|
|
// # in the Software without restriction, including without limitation the rights
|
|
// # to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
// # copies of the Software, and to permit persons to whom the Software is
|
|
// # furnished to do so, subject to the following conditions:
|
|
|
|
// # The above copyright notice and this permission notice shall be included in all
|
|
// # copies or substantial portions of the Software.
|
|
// #
|
|
// # THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
// # IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
// # FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
// # AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
// # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
// # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
// # SOFTWARE.
|
|
// ################################################################################
|
|
|
|
import React from 'react';
|
|
import { PanelProps } from '@grafana/data';
|
|
import { SimpleOptions } from 'types';
|
|
import { css, cx } from 'emotion';
|
|
import { stylesFactory, useTheme } from '@grafana/ui';
|
|
|
|
interface Props extends PanelProps<SimpleOptions> {}
|
|
|
|
export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
|
|
const theme = useTheme();
|
|
const styles = getStyles();
|
|
return (
|
|
<div
|
|
className={cx(
|
|
styles.wrapper,
|
|
css`
|
|
width: ${width}px;
|
|
height: ${height}px;
|
|
`
|
|
)}
|
|
>
|
|
<svg
|
|
className={styles.svg}
|
|
width={width}
|
|
height={height}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
viewBox={`-${width / 2} -${height / 2} ${width} ${height}`}
|
|
>
|
|
<g>
|
|
<circle style={{ fill: `${theme.isLight ? theme.palette.greenBase : theme.palette.blue95}` }} r={100} />
|
|
</g>
|
|
</svg>
|
|
|
|
<div className={styles.textBox}>
|
|
{options.showSeriesCount && (
|
|
<div
|
|
className={css`
|
|
font-size: ${theme.typography.size[options.seriesCountSize]};
|
|
`}
|
|
>
|
|
Number of series: {data.series.length}
|
|
</div>
|
|
)}
|
|
<div>Text option value: {options.text}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const getStyles = stylesFactory(() => {
|
|
return {
|
|
wrapper: css`
|
|
position: relative;
|
|
`,
|
|
svg: css`
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
`,
|
|
textBox: css`
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 10px;
|
|
`,
|
|
};
|
|
});
|