Transforms: Adds beta notice and updates transform descriptions (#24158)
* Transforms: Adds beta notice and updates transform descriptions * Rename organize fields * Webpack - enable images import * Introduce FeatureState type * Alow Container component grow/shrink config * Enable svg import in main app * Jest + webpack for svgs * InfoBox refactor (+ added feature info box), Badge component introduced * Update packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx Co-authored-by: Carl Bergquist <carl@grafana.com> * Minor fixes * Update packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx Co-authored-by: Carl Bergquist <carl@grafana.com> * Update packages/grafana-ui/src/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx Co-authored-by: Carl Bergquist <carl@grafana.com> * fix typo * Build storybook fixed * Fix padding Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com> Co-authored-by: Carl Bergquist <carl@grafana.com>
This commit is contained in:
31 files changed
+585
-184
No files matched your search
@@ -14,4 +14,7 @@ module.exports = {
|
||||
setupFiles: ['jest-canvas-mock', './public/test/jest-shim.ts', './public/test/jest-setup.ts'],
|
||||
snapshotSerializers: ['enzyme-to-json/serializer'],
|
||||
globals: { 'ts-jest': { isolatedModules: true } },
|
||||
moduleNameMapper: {
|
||||
'\\.svg': '<rootDir>/public/test/mocks/svg.ts',
|
||||
},
|
||||
};
|
||||
@@ -18,7 +18,7 @@ export interface ReduceTransformerOptions {
|
||||
export const reduceTransformer: DataTransformerInfo<ReduceTransformerOptions> = {
|
||||
id: DataTransformerID.reduce,
|
||||
name: 'Reduce',
|
||||
description: 'Reduce all rows to a single row and concatenate all results',
|
||||
description: 'Reduce all rows or data points to a single value using a function like max, min, mean or last',
|
||||
defaultOptions: {
|
||||
reducers: [ReducerID.max],
|
||||
},
|
||||
|
||||
@@ -74,3 +74,12 @@ export class AppPlugin<T = KeyValue> extends GrafanaPlugin<AppPluginMeta<T>> {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines life cycle of a feature
|
||||
* @internal
|
||||
*/
|
||||
export enum FeatureState {
|
||||
alpha = 'alpha',
|
||||
beta = 'beta',
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Enumeration of documentation topics
|
||||
* @internal
|
||||
*/
|
||||
export enum DocsId {
|
||||
Transformations,
|
||||
FieldConfig,
|
||||
FieldConfigOverrides,
|
||||
}
|
||||
@@ -16,3 +16,4 @@ export { getFlotPairs, getFlotPairsConstant } from './flotPairs';
|
||||
export { locationUtil } from './location';
|
||||
export { urlUtil, UrlQueryMap, UrlQueryValue } from './url';
|
||||
export { DataLinkBuiltInVars } from './dataLinks';
|
||||
export { DocsId } from './docs';
|
||||
@@ -11,5 +11,10 @@
|
||||
},
|
||||
"exclude": ["dist", "node_modules"],
|
||||
"extends": "@grafana/tsconfig",
|
||||
"include": ["src/**/*.ts*", "../../public/app/types/jquery/*.ts", "../../public/app/types/sanitize-url.d.ts"]
|
||||
"include": [
|
||||
"src/**/*.ts*",
|
||||
"../../public/app/types/jquery/*.ts",
|
||||
"../../public/app/types/sanitize-url.d.ts",
|
||||
"../../public/app/types/svg.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -6,5 +6,10 @@
|
||||
},
|
||||
"exclude": ["../dist", "../node_modules"],
|
||||
"extends": "../tsconfig.json",
|
||||
"include": ["../src/**/*.ts", "../src/**/*.tsx", "../../../public/app/types/sanitize-url.d.ts"]
|
||||
"include": [
|
||||
"../src/**/*.ts",
|
||||
"../src/**/*.tsx",
|
||||
"../../../public/app/types/sanitize-url.d.ts",
|
||||
"../../../public/app/types/svg.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import { boolean, text, select } from '@storybook/addon-knobs';
|
||||
import { Badge, BadgeColor } from './Badge';
|
||||
|
||||
export default {
|
||||
title: 'Other/Badge',
|
||||
component: Badge,
|
||||
decorators: [],
|
||||
parameters: {
|
||||
docs: {},
|
||||
},
|
||||
};
|
||||
|
||||
export const basic = () => {
|
||||
const badgeColor = select<BadgeColor>(
|
||||
'Badge color',
|
||||
{
|
||||
Red: 'red',
|
||||
Green: 'green',
|
||||
Blue: 'blue',
|
||||
Orange: 'orange',
|
||||
},
|
||||
'blue'
|
||||
);
|
||||
const withIcon = boolean('With icon', true);
|
||||
const tooltipText = text('Tooltip text', '');
|
||||
return (
|
||||
<Badge
|
||||
text={'Badge label'}
|
||||
color={badgeColor}
|
||||
icon={withIcon ? 'rocket' : undefined}
|
||||
tooltip={tooltipText.trim() === '' ? undefined : tooltipText}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
import { useTheme } from '../../themes/ThemeContext';
|
||||
import { stylesFactory } from '../../themes/stylesFactory';
|
||||
import { IconName } from '../../types';
|
||||
import { Tooltip } from '../Tooltip/Tooltip';
|
||||
import { getColorFromHexRgbOrName, GrafanaTheme } from '@grafana/data';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { css } from 'emotion';
|
||||
import { HorizontalGroup } from '..';
|
||||
|
||||
export type BadgeColor = 'blue' | 'red' | 'green' | 'orange';
|
||||
|
||||
export interface BadgeProps {
|
||||
text: string;
|
||||
color: BadgeColor;
|
||||
icon?: IconName;
|
||||
tooltip?: string;
|
||||
}
|
||||
|
||||
export const Badge = React.memo<BadgeProps>(({ icon, color, text, tooltip }) => {
|
||||
const theme = useTheme();
|
||||
const styles = getStyles(theme, color);
|
||||
const badge = (
|
||||
<div className={styles.wrapper}>
|
||||
<HorizontalGroup align="center" spacing="xs">
|
||||
{icon && <Icon name={icon} size="sm" />}
|
||||
<span>{text}</span>
|
||||
</HorizontalGroup>
|
||||
</div>
|
||||
);
|
||||
|
||||
return tooltip ? (
|
||||
<Tooltip content={tooltip} placement="auto">
|
||||
{badge}
|
||||
</Tooltip>
|
||||
) : (
|
||||
badge
|
||||
);
|
||||
});
|
||||
|
||||
Badge.displayName = 'Badge';
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
|
||||
let sourceColor = getColorFromHexRgbOrName(color);
|
||||
let borderColor = '';
|
||||
let bgColor = '';
|
||||
let textColor = '';
|
||||
|
||||
if (theme.isDark) {
|
||||
bgColor = tinycolor(sourceColor)
|
||||
.darken(38)
|
||||
.toString();
|
||||
borderColor = tinycolor(sourceColor)
|
||||
.darken(25)
|
||||
.toString();
|
||||
textColor = tinycolor(sourceColor)
|
||||
.lighten(45)
|
||||
.toString();
|
||||
} else {
|
||||
bgColor = tinycolor(sourceColor)
|
||||
.lighten(30)
|
||||
.toString();
|
||||
borderColor = tinycolor(sourceColor)
|
||||
.lighten(15)
|
||||
.toString();
|
||||
textColor = tinycolor(sourceColor)
|
||||
.darken(40)
|
||||
.toString();
|
||||
}
|
||||
|
||||
return {
|
||||
wrapper: css`
|
||||
font-size: ${theme.typography.size.sm};
|
||||
display: inline-flex;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
margin-top: 6px;
|
||||
background: ${bgColor};
|
||||
border: 1px solid ${borderColor};
|
||||
color: ${textColor};
|
||||
|
||||
> span {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
`,
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import { InfoBox, InfoBoxProps } from './InfoBox';
|
||||
import { FeatureState, GrafanaTheme } from '@grafana/data';
|
||||
import { stylesFactory, useTheme } from '../../themes';
|
||||
import { Badge, BadgeProps } from '../Badge/Badge';
|
||||
import { css } from 'emotion';
|
||||
|
||||
interface FeatureInfoBox extends Omit<InfoBoxProps, 'branded' | 'title' | 'urlTitle'> {
|
||||
title: string;
|
||||
featureState?: FeatureState;
|
||||
}
|
||||
export const FeatureInfoBox = React.memo(
|
||||
React.forwardRef<HTMLDivElement, FeatureInfoBox>(({ title, featureState, ...otherProps }, ref) => {
|
||||
const theme = useTheme();
|
||||
const styles = getFeatureInfoBoxStyles(theme);
|
||||
|
||||
const titleEl = featureState ? (
|
||||
<>
|
||||
<div className={styles.badge}>
|
||||
<FeatureBadge featureState={featureState} />
|
||||
</div>
|
||||
<h3>{title}</h3>
|
||||
</>
|
||||
) : (
|
||||
<h3>{title}</h3>
|
||||
);
|
||||
return <InfoBox branded title={titleEl} urlTitle="Read documentation" {...otherProps} />;
|
||||
})
|
||||
);
|
||||
|
||||
const getFeatureInfoBoxStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
return {
|
||||
badge: css`
|
||||
margin-bottom: ${theme.spacing.sm};
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
interface FeatureBadgeProps {
|
||||
featureState: FeatureState;
|
||||
}
|
||||
|
||||
export const FeatureBadge: React.FC<FeatureBadgeProps> = ({ featureState }) => {
|
||||
const display = getPanelStateBadgeDisplayModel(featureState);
|
||||
return <Badge text={display.text} color={display.color} icon={display.icon} />;
|
||||
};
|
||||
|
||||
function getPanelStateBadgeDisplayModel(featureState: FeatureState): BadgeProps {
|
||||
switch (featureState) {
|
||||
case FeatureState.alpha:
|
||||
return {
|
||||
text: 'Alpha',
|
||||
icon: 'exclamation-triangle',
|
||||
color: 'orange',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
text: 'Beta',
|
||||
icon: 'rocket',
|
||||
color: 'blue',
|
||||
};
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import { number } from '@storybook/addon-knobs';
|
||||
import { InfoBox } from './InfoBox';
|
||||
import { FeatureInfoBox } from './FeatureInfoBox';
|
||||
import { FeatureState } from '@grafana/data';
|
||||
|
||||
export default {
|
||||
title: 'Layout/InfoBox',
|
||||
@@ -35,16 +37,11 @@ export const basic = () => {
|
||||
return (
|
||||
<div style={{ width: containerWidth }}>
|
||||
<InfoBox
|
||||
header="User Permission"
|
||||
footer={
|
||||
<>
|
||||
Checkout the{' '}
|
||||
<a className="external-link" target="_blank" href="http://docs.grafana.org/features/datasources/mysql/">
|
||||
MySQL Data Source Docs
|
||||
</a>{' '}
|
||||
for more information.,
|
||||
</>
|
||||
}
|
||||
title="User Permission"
|
||||
url={'http://docs.grafana.org/features/datasources/mysql/'}
|
||||
onDismiss={() => {
|
||||
alert('onDismiss clicked');
|
||||
}}
|
||||
>
|
||||
<p>
|
||||
The database user should only be granted SELECT permissions on the specified database & tables you want to
|
||||
@@ -57,3 +54,26 @@ export const basic = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const featureInfoBox = () => {
|
||||
const { containerWidth } = getKnobs();
|
||||
|
||||
return (
|
||||
<div style={{ width: containerWidth }}>
|
||||
<FeatureInfoBox
|
||||
title="Transformations"
|
||||
url={'http://www.grafana.com'}
|
||||
featureState={FeatureState.beta}
|
||||
onDismiss={() => {
|
||||
alert('onDismiss clicked');
|
||||
}}
|
||||
>
|
||||
Transformations allow you to join, calculate, re-order, hide and rename your query results before being
|
||||
visualized. <br />
|
||||
Many transforms are not suitable if your using the Graph visualisation as it currently only supports time
|
||||
series. <br />
|
||||
It can help to switch to Table visualisation to understand what a transformation is doing.
|
||||
</FeatureInfoBox>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -2,10 +2,19 @@ import React from 'react';
|
||||
import { css, cx } from 'emotion';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { stylesFactory, useTheme } from '../../themes';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
import { IconButton } from '../IconButton/IconButton';
|
||||
import { HorizontalGroup } from '../Layout/Layout';
|
||||
import panelArtDark from './panelArt_dark.svg';
|
||||
import panelArtLight from './panelArt_light.svg';
|
||||
|
||||
export interface Props extends React.HTMLAttributes<HTMLDivElement> {
|
||||
header?: string | JSX.Element;
|
||||
footer?: string | JSX.Element;
|
||||
export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
||||
children: React.ReactNode;
|
||||
title?: string | JSX.Element;
|
||||
url?: string;
|
||||
urlTitle?: string;
|
||||
branded?: boolean;
|
||||
onDismiss?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -14,33 +23,39 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement> {
|
||||
* @Alpha
|
||||
*/
|
||||
export const InfoBox = React.memo(
|
||||
React.forwardRef<HTMLDivElement, Props>(({ header, footer, className, children, ...otherProps }, ref) => {
|
||||
const theme = useTheme();
|
||||
const css = getInfoBoxStyles(theme);
|
||||
React.forwardRef<HTMLDivElement, InfoBoxProps>(
|
||||
({ title, className, children, branded, url, urlTitle, onDismiss, ...otherProps }, ref) => {
|
||||
const theme = useTheme();
|
||||
const styles = getInfoBoxStyles(theme);
|
||||
const wrapperClassName = branded ? cx(styles.wrapperBranded, className) : cx(styles.wrapper, className);
|
||||
|
||||
return (
|
||||
<div className={cx([css.wrapper, className])} {...otherProps} ref={ref}>
|
||||
{header && (
|
||||
<div className={css.header}>
|
||||
<h5>{header}</h5>
|
||||
return (
|
||||
<div className={wrapperClassName} {...otherProps} ref={ref}>
|
||||
<div>
|
||||
<HorizontalGroup justify={'space-between'} align={'flex-start'}>
|
||||
<div>{typeof title === 'string' ? <h4>{title}</h4> : title}</div>
|
||||
{onDismiss && <IconButton name={'times'} onClick={onDismiss} />}
|
||||
</HorizontalGroup>
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
{footer && <div className={css.footer}>{footer}</div>}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
<div>{children}</div>
|
||||
{url && (
|
||||
<a href={url} className={styles.docsLink} target="_blank">
|
||||
<Icon name="book" /> {urlTitle || 'Read more'}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
const getInfoBoxStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
wrapper: css`
|
||||
position: relative;
|
||||
padding: ${theme.spacing.lg};
|
||||
padding: ${theme.spacing.md};
|
||||
background-color: ${theme.colors.bg2};
|
||||
border-top: 3px solid ${theme.palette.blue80};
|
||||
margin-bottom: ${theme.spacing.md};
|
||||
margin-right: ${theme.spacing.xs};
|
||||
box-shadow: ${theme.shadows.listItem};
|
||||
flex-grow: 1;
|
||||
|
||||
ul {
|
||||
@@ -60,18 +75,39 @@ const getInfoBoxStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@extend .external-link;
|
||||
}
|
||||
|
||||
&--max-lg {
|
||||
max-width: ${theme.breakpoints.lg};
|
||||
}
|
||||
`,
|
||||
header: css`
|
||||
margin-bottom: ${theme.spacing.d};
|
||||
wrapperBranded: css`
|
||||
padding: ${theme.spacing.md};
|
||||
border-radius: ${theme.border.radius.md};
|
||||
position: relative;
|
||||
box-shadow: 0 0 30px 10px rgba(0, 0, 0, ${theme.isLight ? 0.05 : 0.2});
|
||||
z-index: 0;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(${theme.isLight ? panelArtLight : panelArtDark});
|
||||
border-radius: ${theme.border.radius.md};
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
filter: saturate(80%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`,
|
||||
footer: css`
|
||||
margin-top: ${theme.spacing.d};
|
||||
docsLink: css`
|
||||
display: inline-block;
|
||||
margin-top: ${theme.spacing.lg};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
`,
|
||||
}));
|
||||
@@ -0,0 +1,58 @@
|
||||
<svg width="1826" height="460" viewBox="0 0 1826 460" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g clip-path="url(#clip0)">
|
||||
<rect x="1632.81" y="19.2075" width="517" height="517" fill="url(#pattern0)"/>
|
||||
<path d="M1891.6 446.1C1984.38 446.1 2059.6 370.884 2059.6 278.1C2059.6 185.316 1984.38 110.1 1891.6 110.1C1798.82 110.1 1723.6 185.316 1723.6 278.1C1723.6 370.884 1798.82 446.1 1891.6 446.1Z" fill="#021E40"/>
|
||||
<path d="M0.00012207 460L1826 460V0L0.00012207 0V460Z" fill="#021E40"/>
|
||||
<rect x="-24.5785" y="-57.4202" width="400" height="400" fill="url(#pattern1)"/>
|
||||
<path d="M1699.5 415.8C1698.5 415.8 1697.8 415 1697.8 414.1C1697.8 413.2 1698.6 412.4 1699.5 412.4C1700.4 412.4 1701.2 413.2 1701.2 414.1C1701.2 415 1700.5 415.8 1699.5 415.8Z" fill="#253D7F"/>
|
||||
<path d="M1706.6 415.8C1705.6 415.8 1704.9 415 1704.9 414.1C1704.9 413.2 1705.7 412.4 1706.6 412.4C1707.6 412.4 1708.3 413.2 1708.3 414.1C1708.3 415 1707.5 415.8 1706.6 415.8Z" fill="#253D7F"/>
|
||||
<path d="M1692.4 422.8C1691.4 422.8 1690.7 422 1690.7 421.1C1690.7 420.2 1691.5 419.4 1692.4 419.4C1693.3 419.4 1694.1 420.2 1694.1 421.1C1694.1 422 1693.4 422.8 1692.4 422.8Z" fill="#253D7F"/>
|
||||
<path d="M1699.5 422.8C1698.5 422.8 1697.8 422 1697.8 421.1C1697.8 420.2 1698.6 419.4 1699.5 419.4C1700.4 419.4 1701.2 420.2 1701.2 421.1C1701.2 422 1700.5 422.8 1699.5 422.8Z" fill="#253D7F"/>
|
||||
<path d="M1706.6 422.8C1705.6 422.8 1704.9 422 1704.9 421.1C1704.9 420.2 1705.7 419.4 1706.6 419.4C1707.6 419.4 1708.3 420.2 1708.3 421.1C1708.3 422 1707.5 422.8 1706.6 422.8Z" fill="#253D7F"/>
|
||||
<path d="M1692.4 429.9C1691.4 429.9 1690.7 429.1 1690.7 428.2C1690.7 427.3 1691.5 426.5 1692.4 426.5C1693.3 426.5 1694.1 427.3 1694.1 428.2C1694.1 429.1 1693.4 429.9 1692.4 429.9Z" fill="#253D7F"/>
|
||||
<path d="M1699.5 429.9C1698.5 429.9 1697.8 429.1 1697.8 428.2C1697.8 427.3 1698.6 426.5 1699.5 426.5C1700.4 426.5 1701.2 427.3 1701.2 428.2C1701.2 429.1 1700.5 429.9 1699.5 429.9Z" fill="#253D7F"/>
|
||||
<path d="M1169.2 115C1166.5 115 1164.3 112.8 1164.3 110.1C1164.3 107.4 1166.5 105.2 1169.2 105.2C1171.9 105.2 1174.1 107.4 1174.1 110.1C1174.2 112.7 1172 115 1169.2 115Z" fill="#1B336A"/>
|
||||
<path d="M1743.2 413.6C1740.5 413.6 1738.3 411.4 1738.3 408.7C1738.3 406 1740.5 403.8 1743.2 403.8C1745.9 403.8 1748.1 406 1748.1 408.7C1748.1 411.4 1745.9 413.6 1743.2 413.6Z" fill="#253D7F"/>
|
||||
<path d="M474 391.4C473 391.4 472.3 390.6 472.3 389.7C472.3 388.8 473.1 388 474 388C474.9 388 475.7 388.8 475.7 389.7C475.7 390.6 475 391.4 474 391.4Z" fill="#1F60C4"/>
|
||||
<path d="M467 398.4C466 398.4 465.3 397.6 465.3 396.7C465.3 395.8 466.1 395 467 395C467.9 395 468.7 395.8 468.7 396.7C468.7 397.6 467.9 398.4 467 398.4Z" fill="#1F60C4"/>
|
||||
<path d="M459.9 405.5C458.9 405.5 458.2 404.7 458.2 403.8C458.2 402.9 459 402.1 459.9 402.1C460.8 402.1 461.6 402.9 461.6 403.8C461.6 404.7 460.8 405.5 459.9 405.5Z" fill="#1F60C4"/>
|
||||
<path d="M64.7 423.2H60.2V413.6H64.7V423.2ZM71.3 409.6H66.8V423.2H71.3V409.6ZM77.9 405.5H73.4V423.1H77.9V405.5Z" fill="#253D7F"/>
|
||||
<path d="M40.6 57H30V67.6H40.6V57Z" fill="#2F5CA1"/>
|
||||
<path d="M1468.9 433.3C1468.9 430.7 1471 428.6 1473.6 428.6C1476.2 428.6 1478.3 430.7 1478.3 433.3H1483.9C1483.9 427.7 1479.3 423.1 1473.7 423.1C1468.1 423.1 1463.5 427.7 1463.5 433.3H1468.9Z" fill="#253D7F"/>
|
||||
<path d="M1212.4 58.3001C1212.4 55.7001 1214.5 53.6001 1217.1 53.6001C1219.7 53.6001 1221.8 55.7001 1221.8 58.3001H1227.4C1227.4 52.7001 1222.8 48.1001 1217.2 48.1001C1211.6 48.1001 1207 52.7001 1207 58.3001H1212.4Z" fill="#253D7F"/>
|
||||
<path d="M236.5 30.8C233.793 30.8 231.574 32.8593 231.324 35.5H226.913C227.177 30.4049 231.444 26.3 236.6 26.3C241.756 26.3 246.023 30.4049 246.287 35.5H241.676C241.426 32.8593 239.207 30.8 236.5 30.8Z" fill="#1F60C4" stroke="#2F5CA1"/>
|
||||
<path d="M1723.6 273.2C1857.42 273.2 1965.9 164.719 1965.9 30.9001C1965.9 -102.919 1857.42 -211.4 1723.6 -211.4C1589.78 -211.4 1481.3 -102.919 1481.3 30.9001C1481.3 164.719 1589.78 273.2 1723.6 273.2Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M151.9 932.7C103.8 932.7 57.1 923.3 13.1 904.7C-29.4 886.7 -67.5 861 -100.2 828.3C-132.9 795.6 -158.6 757.4 -176.6 715C-195.2 671 -204.6 624.3 -204.6 576.2C-204.6 528.1 -195.2 481.4 -176.6 437.4C-158.6 394.9 -132.9 356.8 -100.2 324.1C-67.5 291.4 -29.3 265.7 13.1 247.7C57.1 229.1 103.8 219.7 151.9 219.7C200 219.7 246.7 229.1 290.7 247.7C333.2 265.7 371.3 291.4 404 324.1C436.7 356.8 462.4 395 480.4 437.4C499 481.4 508.4 528.1 508.4 576.2C508.4 624.3 499 671 480.4 715C462.4 757.5 436.7 795.6 404 828.3C371.3 861 333.1 886.7 290.7 904.7C246.7 923.2 200 932.7 151.9 932.7ZM151.9 270.6C70.3 270.6 -6.40001 302.4 -64.1 360.1C-121.8 417.8 -153.6 494.5 -153.6 576.1C-153.6 657.7 -121.8 734.4 -64.1 792.1C-6.40001 849.8 70.3 881.6 151.9 881.6C233.5 881.6 310.2 849.8 367.9 792.1C425.6 734.4 457.4 657.7 457.4 576.1C457.4 494.5 425.6 417.8 367.9 360.1C310.2 302.4 233.5 270.6 151.9 270.6Z" fill="url(#paint1_linear)"/>
|
||||
<path d="M1623.4 1024.5C1568.3 1024.5 1514.9 1013.7 1464.7 992.5C1416.1 972 1372.5 942.6 1335.1 905.1C1297.6 867.6 1268.2 824 1247.7 775.5C1226.4 725.2 1215.7 671.8 1215.7 616.8C1215.7 561.8 1226.5 508.3 1247.7 458.1C1268.2 409.5 1297.6 365.9 1335.1 328.5C1372.6 291 1416.2 261.6 1464.7 241.1C1515 219.8 1568.4 209.1 1623.4 209.1C1678.4 209.1 1731.9 219.9 1782.1 241.1C1830.7 261.6 1874.3 291 1911.7 328.5C1949.2 366 1978.6 409.6 1999.1 458.1C2020.4 508.4 2031.1 561.8 2031.1 616.8C2031.1 671.8 2020.3 725.3 1999.1 775.5C1978.6 824.1 1949.2 867.7 1911.7 905.1C1874.2 942.5 1830.6 972 1782.1 992.5C1731.9 1013.7 1678.5 1024.5 1623.4 1024.5ZM1623.4 211.9C1568.7 211.9 1515.7 222.6 1465.8 243.7C1417.6 264.1 1374.3 293.3 1337.1 330.5C1299.9 367.7 1270.7 411 1250.3 459.2C1229.2 509.1 1218.5 562.1 1218.5 616.8C1218.5 671.5 1229.2 724.5 1250.3 774.4C1270.7 822.6 1299.9 865.9 1337.1 903.1C1374.3 940.3 1417.6 969.5 1465.8 989.9C1515.7 1011 1568.7 1021.7 1623.4 1021.7C1678.1 1021.7 1731.1 1011 1781 989.9C1829.2 969.5 1872.5 940.3 1909.7 903.1C1946.9 865.9 1976.1 822.6 1996.5 774.4C2017.6 724.5 2028.3 671.5 2028.3 616.8C2028.3 562.1 2017.6 509.1 1996.5 459.2C1976.1 411 1946.9 367.7 1909.7 330.5C1872.5 293.3 1829.2 264.1 1781 243.7C1731.1 222.6 1678.1 211.9 1623.4 211.9Z" fill="#253D7F"/>
|
||||
<path d="M1621.9 1075.8C1621.9 1074.1 1623.2 1072.8 1624.9 1072.8C1626.6 1072.8 1627.9 1074.1 1627.9 1075.8C1627.9 1077.5 1626.6 1078.8 1624.9 1078.8C1623.3 1078.8 1621.9 1077.5 1621.9 1075.8ZM1584.7 1077.2C1583 1077.1 1581.8 1075.6 1581.9 1074C1582 1072.4 1583.5 1071.1 1585.1 1071.3C1586.8 1071.4 1588 1072.9 1587.8 1074.5C1587.7 1076.1 1586.4 1077.3 1584.8 1077.3C1584.9 1077.2 1584.8 1077.2 1584.7 1077.2ZM1661.8 1074.2C1661.7 1072.5 1662.9 1071.1 1664.5 1071C1666.2 1070.8 1667.6 1072.1 1667.7 1073.7C1667.9 1075.3 1666.6 1076.8 1665 1076.9C1664.9 1076.9 1664.8 1076.9 1664.7 1076.9C1663.3 1077 1662 1075.8 1661.8 1074.2ZM1544.8 1072.2C1543.2 1071.9 1542.1 1070.4 1542.3 1068.7C1542.6 1067.1 1544.1 1066 1545.8 1066.3C1547.4 1066.6 1548.5 1068.1 1548.3 1069.8C1548.1 1071.3 1546.8 1072.3 1545.3 1072.3C1545.1 1072.2 1545 1072.2 1544.8 1072.2ZM1701.5 1069.2C1701.2 1067.6 1702.3 1066 1703.9 1065.7C1705.5 1065.4 1707.1 1066.5 1707.4 1068.1C1707.7 1069.7 1706.6 1071.3 1705 1071.6C1704.8 1071.6 1704.6 1071.6 1704.5 1071.6C1703 1071.7 1701.8 1070.7 1701.5 1069.2ZM1505.5 1063.6C1503.9 1063.2 1502.9 1061.5 1503.4 1059.9C1503.8 1058.3 1505.5 1057.4 1507.1 1057.8C1508.7 1058.2 1509.7 1059.9 1509.2 1061.5C1508.8 1062.8 1507.6 1063.7 1506.3 1063.7C1506 1063.7 1505.7 1063.7 1505.5 1063.6ZM1740.6 1060.7C1740.2 1059.1 1741.1 1057.5 1742.7 1057C1744.3 1056.6 1745.9 1057.5 1746.4 1059.1C1746.8 1060.7 1745.9 1062.3 1744.3 1062.8C1744 1062.9 1743.8 1062.9 1743.5 1062.9C1742.1 1063 1740.9 1062.1 1740.6 1060.7ZM1467 1051.7C1465.4 1051.1 1464.6 1049.4 1465.2 1047.9C1465.8 1046.3 1467.5 1045.5 1469 1046.1C1470.6 1046.7 1471.4 1048.4 1470.8 1049.9C1470.4 1051.1 1469.2 1051.9 1468 1051.9C1467.7 1051.9 1467.4 1051.8 1467 1051.7ZM1778.7 1048.9C1778.1 1047.4 1778.9 1045.6 1780.5 1045.1C1782.1 1044.5 1783.8 1045.3 1784.3 1046.9C1784.9 1048.5 1784.1 1050.2 1782.5 1050.7C1782.2 1050.8 1781.8 1050.9 1781.5 1050.9C1780.3 1050.9 1779.2 1050.1 1778.7 1048.9ZM1429.8 1036.4C1428.3 1035.7 1427.6 1033.9 1428.3 1032.4C1429 1030.9 1430.8 1030.2 1432.3 1030.9C1433.8 1031.6 1434.5 1033.4 1433.8 1034.9C1433.3 1036 1432.2 1036.7 1431.1 1036.7C1430.6 1036.7 1430.2 1036.6 1429.8 1036.4ZM1815.7 1033.7C1815 1032.2 1815.6 1030.4 1817.1 1029.7C1818.6 1029 1820.4 1029.6 1821.1 1031.1C1821.8 1032.6 1821.2 1034.4 1819.7 1035.1C1819.3 1035.3 1818.9 1035.4 1818.4 1035.4C1817.3 1035.5 1816.2 1034.8 1815.7 1033.7ZM1394 1017.9C1392.6 1017.1 1392.1 1015.2 1392.9 1013.8C1393.7 1012.4 1395.5 1011.9 1397 1012.7C1398.4 1013.5 1398.9 1015.3 1398.1 1016.8C1397.5 1017.8 1396.5 1018.3 1395.5 1018.3C1395 1018.3 1394.5 1018.2 1394 1017.9ZM1851.2 1015.4C1850.4 1014 1850.9 1012.1 1852.3 1011.3C1853.7 1010.5 1855.6 1011 1856.4 1012.4C1857.2 1013.8 1856.8 1015.7 1855.3 1016.5C1854.8 1016.8 1854.3 1016.9 1853.8 1016.9C1852.8 1016.9 1851.8 1016.4 1851.2 1015.4ZM1360 996.4C1358.6 995.5 1358.3 993.6 1359.2 992.2C1360.1 990.8 1362 990.5 1363.4 991.4C1364.8 992.3 1365.1 994.2 1364.2 995.6C1363.6 996.4 1362.7 996.9 1361.7 996.9C1361.1 997 1360.5 996.8 1360 996.4ZM1885 994.1C1884 992.8 1884.4 990.9 1885.7 989.9C1887.1 988.9 1888.9 989.3 1889.9 990.6C1890.9 992 1890.5 993.8 1889.2 994.8C1888.7 995.2 1888.1 995.3 1887.5 995.3C1886.5 995.3 1885.6 994.9 1885 994.1ZM1328 972.1C1326.7 971 1326.6 969.1 1327.6 967.9C1328.7 966.6 1330.6 966.4 1331.8 967.5C1333.1 968.6 1333.2 970.5 1332.2 971.7C1331.6 972.4 1330.7 972.8 1329.9 972.8C1329.2 972.8 1328.6 972.5 1328 972.1ZM1916.8 969.8C1915.7 968.5 1915.9 966.6 1917.2 965.6C1918.5 964.5 1920.4 964.7 1921.4 966C1922.5 967.3 1922.3 969.2 1921 970.2C1920.4 970.7 1919.8 970.9 1919.1 970.9C1918.3 970.9 1917.4 970.6 1916.8 969.8ZM1298.2 945C1297 943.8 1297 941.9 1298.2 940.8C1299.4 939.6 1301.3 939.6 1302.4 940.8C1303.6 942 1303.6 943.9 1302.4 945C1301.8 945.6 1301 945.9 1300.3 945.9C1299.6 945.9 1298.8 945.6 1298.2 945ZM1946.4 943C1945.2 941.8 1945.2 939.9 1946.4 938.8C1947.6 937.6 1949.5 937.6 1950.6 938.8C1951.8 940 1951.8 941.9 1950.6 943C1950 943.6 1949.2 943.9 1948.5 943.9C1947.8 943.8 1947 943.6 1946.4 943ZM1270.9 915.5C1269.8 914.2 1270 912.3 1271.2 911.3C1272.5 910.2 1274.4 910.4 1275.4 911.6C1276.5 912.9 1276.3 914.8 1275.1 915.8C1274.5 916.3 1273.9 916.5 1273.2 916.5C1272.3 916.5 1271.5 916.2 1270.9 915.5ZM1973.6 913.6C1972.3 912.5 1972.2 910.6 1973.2 909.4C1974.3 908.1 1976.2 908 1977.4 909C1978.7 910.1 1978.8 912 1977.8 913.2C1977.2 913.9 1976.3 914.3 1975.5 914.3C1974.9 914.3 1974.2 914.1 1973.6 913.6ZM1246.2 883.7C1245.2 882.4 1245.6 880.5 1246.9 879.5C1248.3 878.5 1250.1 878.9 1251.1 880.2C1252.1 881.6 1251.7 883.4 1250.4 884.4C1249.9 884.8 1249.3 885 1248.7 885C1247.7 885 1246.8 884.5 1246.2 883.7ZM1998.1 882.1C1996.7 881.1 1996.4 879.3 1997.4 877.9C1998.4 876.5 2000.2 876.2 2001.6 877.2C2003 878.2 2003.3 880 2002.3 881.4C2001.7 882.2 2000.8 882.7 1999.8 882.7C1999.3 882.6 1998.7 882.4 1998.1 882.1ZM1224.4 849.9C1223.6 848.5 1224 846.6 1225.5 845.8C1226.9 845 1228.8 845.4 1229.6 846.9C1230.4 848.3 1230 850.2 1228.5 851C1228 851.3 1227.5 851.4 12Line truncated
|
||||
<path d="M1623.4 927.1C1540.5 927.1 1462.5 894.8 1403.9 836.2C1345.3 777.6 1313 699.6 1313 616.7C1313 533.8 1345.3 455.8 1403.9 397.2C1462.5 338.6 1540.5 306.3 1623.4 306.3C1706.3 306.3 1784.3 338.6 1842.9 397.2C1901.5 455.8 1933.8 533.8 1933.8 616.7C1933.8 699.6 1901.5 777.6 1842.9 836.2C1784.3 894.8 1706.3 927.1 1623.4 927.1ZM1623.4 309.3C1541.3 309.3 1464.1 341.3 1406 399.3C1347.9 457.4 1316 534.6 1316 616.7C1316 698.8 1348 776 1406 834.1C1464.1 892.2 1541.3 924.1 1623.4 924.1C1705.5 924.1 1782.7 892.1 1840.8 834.1C1898.9 776 1930.8 698.8 1930.8 616.7C1930.8 534.6 1898.8 457.4 1840.8 399.3C1782.7 341.3 1705.5 309.3 1623.4 309.3Z" fill="#253D7F"/>
|
||||
<path d="M1020.2 53.1321H1029V44.3321H1020.2V53.1321Z" fill="#253D7F"/>
|
||||
<path d="M1011.36 61.9707H1020.16V53.1707H1011.36V61.9707Z" fill="#253D7F"/>
|
||||
</g>
|
||||
<defs>
|
||||
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0"/>
|
||||
</pattern>
|
||||
<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image1"/>
|
||||
</pattern>
|
||||
<linearGradient id="paint0_linear" x1="1493.94" y1="-133.8" x2="2136.91" y2="327.206" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="1.29819e-07" stop-color="#213368"/>
|
||||
<stop offset="0.123" stop-color="#152B59"/>
|
||||
<stop offset="0.2949" stop-color="#0A244B"/>
|
||||
<stop offset="0.5075" stop-color="#041F42"/>
|
||||
<stop offset="0.8795" stop-color="#021E40"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="-204.643" y1="576.156" x2="508.368" y2="576.156" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#213368"/>
|
||||
<stop offset="0.2428" stop-color="#172C5B"/>
|
||||
<stop offset="0.6919" stop-color="#072247"/>
|
||||
<stop offset="1" stop-color="#021E40"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0">
|
||||
<path d="M0 0H1826V460H0V0Z" fill="white"/>
|
||||
</clipPath>
|
||||
<image id="image0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgYAAAIGCAYAAAAvP0egAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
|
||||
<image id="image1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,64 @@
|
||||
<svg width="1826" height="460" viewBox="0 0 1826 460" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M0 460L1826 460V0L0 0V460Z" fill="#D4E9FF"/>
|
||||
<path d="M1723.6 273.2C1857.42 273.2 1965.9 164.719 1965.9 30.9001C1965.9 -102.919 1857.42 -211.4 1723.6 -211.4C1589.78 -211.4 1481.3 -102.919 1481.3 30.9001C1481.3 164.719 1589.78 273.2 1723.6 273.2Z" fill="url(#paint0_linear)"/>
|
||||
<rect x="-24.5785" y="-56.813" width="400" height="399" fill="url(#pattern0)"/>
|
||||
<path d="M55 68.8001C54 68.8001 53.3 68.0001 53.3 67.1001C53.3 66.2001 54.1 65.4001 55 65.4001C56 65.4001 56.7001 66.2001 56.7001 67.1001C56.7001 68.0001 55.9 68.8001 55 68.8001Z" fill="#00E5B9"/>
|
||||
<path d="M62 68.8001C61 68.8001 60.3 68.0001 60.3 67.1001C60.3 66.2001 61.1 65.4001 62 65.4001C62.9 65.4001 63.7001 66.2001 63.7001 67.1001C63.7001 68.0001 63 68.8001 62 68.8001Z" fill="#00E5B9"/>
|
||||
<path d="M47.9001 75.9002C46.9001 75.9002 46.2001 75.1002 46.2001 74.2002C46.2001 73.3002 47.0001 72.5002 47.9001 72.5002C48.9001 72.5002 49.6001 73.3002 49.6001 74.2002C49.6001 75.1002 48.8001 75.9002 47.9001 75.9002Z" fill="#00E5B9"/>
|
||||
<path d="M55 75.9002C54 75.9002 53.3 75.1002 53.3 74.2002C53.3 73.3002 54.1 72.5002 55 72.5002C56 72.5002 56.7001 73.3002 56.7001 74.2002C56.7001 75.1002 55.9 75.9002 55 75.9002Z" fill="#00E5B9"/>
|
||||
<path d="M62 75.9002C61 75.9002 60.3 75.1002 60.3 74.2002C60.3 73.3002 61.1 72.5002 62 72.5002C62.9 72.5002 63.7001 73.3002 63.7001 74.2002C63.7001 75.1002 63 75.9002 62 75.9002Z" fill="#00E5B9"/>
|
||||
<path d="M47.9001 83.0001C46.9001 83.0001 46.2001 82.2001 46.2001 81.3001C46.2001 80.4001 47.0001 79.6001 47.9001 79.6001C48.9001 79.6001 49.6001 80.4001 49.6001 81.3001C49.6001 82.2001 48.8001 83.0001 47.9001 83.0001Z" fill="#00E5B9"/>
|
||||
<path d="M55 83.0001C54 83.0001 53.3 82.2001 53.3 81.3001C53.3 80.4001 54.1 79.6001 55 79.6001C56 79.6001 56.7001 80.4001 56.7001 81.3001C56.7001 82.2001 55.9 83.0001 55 83.0001Z" fill="#00E5B9"/>
|
||||
<path d="M1699.5 415.8C1698.5 415.8 1697.8 415 1697.8 414.1C1697.8 413.2 1698.6 412.4 1699.5 412.4C1700.4 412.4 1701.2 413.2 1701.2 414.1C1701.2 415 1700.5 415.8 1699.5 415.8Z" fill="#AFD6F2"/>
|
||||
<path d="M1706.6 415.8C1705.6 415.8 1704.9 415 1704.9 414.1C1704.9 413.2 1705.7 412.4 1706.6 412.4C1707.6 412.4 1708.3 413.2 1708.3 414.1C1708.3 415 1707.5 415.8 1706.6 415.8Z" fill="#AFD6F2"/>
|
||||
<path d="M1692.4 422.8C1691.4 422.8 1690.7 422 1690.7 421.1C1690.7 420.2 1691.5 419.4 1692.4 419.4C1693.3 419.4 1694.1 420.2 1694.1 421.1C1694.1 422 1693.4 422.8 1692.4 422.8Z" fill="#AFD6F2"/>
|
||||
<path d="M1699.5 422.8C1698.5 422.8 1697.8 422 1697.8 421.1C1697.8 420.2 1698.6 419.4 1699.5 419.4C1700.4 419.4 1701.2 420.2 1701.2 421.1C1701.2 422 1700.5 422.8 1699.5 422.8Z" fill="#AFD6F2"/>
|
||||
<path d="M1706.6 422.8C1705.6 422.8 1704.9 422 1704.9 421.1C1704.9 420.2 1705.7 419.4 1706.6 419.4C1707.6 419.4 1708.3 420.2 1708.3 421.1C1708.3 422 1707.5 422.8 1706.6 422.8Z" fill="#AFD6F2"/>
|
||||
<path d="M1692.4 429.9C1691.4 429.9 1690.7 429.1 1690.7 428.2C1690.7 427.3 1691.5 426.5 1692.4 426.5C1693.3 426.5 1694.1 427.3 1694.1 428.2C1694.1 429.1 1693.4 429.9 1692.4 429.9Z" fill="#AFD6F2"/>
|
||||
<path d="M1699.5 429.9C1698.5 429.9 1697.8 429.1 1697.8 428.2C1697.8 427.3 1698.6 426.5 1699.5 426.5C1700.4 426.5 1701.2 427.3 1701.2 428.2C1701.2 429.1 1700.5 429.9 1699.5 429.9Z" fill="#AFD6F2"/>
|
||||
<path d="M1169.2 115C1166.5 115 1164.3 112.8 1164.3 110.1C1164.3 107.4 1166.5 105.2 1169.2 105.2C1171.9 105.2 1174.1 107.4 1174.1 110.1C1174.2 112.7 1172 115 1169.2 115Z" fill="#AFD6F2"/>
|
||||
<path d="M1743.2 413.6C1740.5 413.6 1738.3 411.4 1738.3 408.7C1738.3 406 1740.5 403.8 1743.2 403.8C1745.9 403.8 1748.1 406 1748.1 408.7C1748.1 411.4 1745.9 413.6 1743.2 413.6Z" fill="#AFD6F2"/>
|
||||
<path d="M305.4 177.5C302.7 177.5 300.5 175.3 300.5 172.6C300.5 169.9 302.7 167.7 305.4 167.7C308.1 167.7 310.3 169.9 310.3 172.6C310.4 175.3 308.1 177.5 305.4 177.5Z" fill="#F05A28"/>
|
||||
<path d="M74.4001 221H63.8V231.6H74.4001V221Z" fill="#AFD6F2"/>
|
||||
<path d="M474 391.4C473 391.4 472.3 390.6 472.3 389.7C472.3 388.8 473.1 388 474 388C474.9 388 475.7 388.8 475.7 389.7C475.7 390.6 475 391.4 474 391.4Z" fill="#BFDCF7"/>
|
||||
<path d="M467 398.4C466 398.4 465.3 397.6 465.3 396.7C465.3 395.8 466.1 395 467 395C467.9 395 468.7 395.8 468.7 396.7C468.7 397.6 467.9 398.4 467 398.4Z" fill="#BFDCF7"/>
|
||||
<path d="M459.9 405.5C458.9 405.5 458.2 404.7 458.2 403.8C458.2 402.9 459 402.1 459.9 402.1C460.8 402.1 461.6 402.9 461.6 403.8C461.6 404.7 460.8 405.5 459.9 405.5Z" fill="#BFDCF7"/>
|
||||
<path d="M300.6 61.8001C299.6 61.8001 298.9 61.0001 298.9 60.1001C298.9 59.2001 299.7 58.4001 300.6 58.4001C301.5 58.4001 302.3 59.2001 302.3 60.1001C302.3 61.0001 301.6 61.8001 300.6 61.8001Z" fill="#8AB8FF"/>
|
||||
<path d="M293.5 68.8001C292.5 68.8001 291.8 68.0001 291.8 67.1001C291.8 66.2001 292.6 65.4001 293.5 65.4001C294.4 65.4001 295.2 66.2001 295.2 67.1001C295.2 68.0001 294.5 68.8001 293.5 68.8001Z" fill="#8AB8FF"/>
|
||||
<path d="M286.5 75.9002C285.5 75.9002 284.8 75.1002 284.8 74.2002C284.8 73.3002 285.6 72.5002 286.5 72.5002C287.4 72.5002 288.2 73.3002 288.2 74.2002C288.2 75.1002 287.4 75.9002 286.5 75.9002Z" fill="#8AB8FF"/>
|
||||
<path d="M64.7001 423.2H60.2001V413.6H64.7001V423.2ZM71.3001 409.6H66.8001V423.2H71.3001V409.6ZM77.9001 405.5H73.4001V423.1H77.9001V405.5Z" fill="#D4E1F4"/>
|
||||
<path d="M1468.9 433.3C1468.9 430.7 1471 428.6 1473.6 428.6C1476.2 428.6 1478.3 430.7 1478.3 433.3H1483.9C1483.9 427.7 1479.3 423.1 1473.7 423.1C1468.1 423.1 1463.5 427.7 1463.5 433.3H1468.9Z" fill="#AFD6F2"/>
|
||||
<path d="M1212.4 58.3001C1212.4 55.7001 1214.5 53.6001 1217.1 53.6001C1219.7 53.6001 1221.8 55.7001 1221.8 58.3001H1227.4C1227.4 52.7001 1222.8 48.1001 1217.2 48.1001C1211.6 48.1001 1207 52.7001 1207 58.3001H1212.4Z" fill="#AFD6F2"/>
|
||||
<path d="M231.8 36C231.8 33.4 233.9 31.3 236.5 31.3C239.1 31.3 241.2 33.4 241.2 36H246.8C246.8 30.4 242.2 25.8 236.6 25.8C231 25.8 226.4 30.4 226.4 36H231.8Z" fill="#AFD6F2"/>
|
||||
<path d="M266.9 242.8C266.5 242.8 266.2 242.7 265.9 242.4C265.3 241.8 265.3 241 265.9 240.4L272.8 233.5C273.3 233 274.3 233 274.8 233.5L279.1 237.8L285 231.9C285.6 231.3 286.4 231.3 287 231.9C287.6 232.5 287.6 233.3 287 233.9L280.1 240.8C279.6 241.3 278.6 241.3 278.1 240.8L273.8 236.5L267.9 242.4C267.6 242.7 267.3 242.8 266.9 242.8Z" fill="#FBCA0A"/>
|
||||
<path d="M43.3 158.9C-39.6 158.9 -117.6 126.6 -176.2 68.0001C-234.8 9.40012 -267.1 -68.5999 -267.1 -151.5C-267.1 -234.4 -234.8 -312.4 -176.2 -371C-117.6 -429.6 -39.6 -461.9 43.3 -461.9C126.2 -461.9 204.2 -429.6 262.8 -371C321.4 -312.4 353.7 -234.4 353.7 -151.5C353.7 -68.5999 321.5 9.30011 262.8 68.0001C204.1 126.7 126.3 158.9 43.3 158.9ZM43.3 -458.9C-38.8 -458.9 -116 -426.9 -174.1 -368.9C-232.2 -310.8 -264.1 -233.6 -264.1 -151.5C-264.1 -69.3999 -232.1 7.80008 -174.1 65.9001C-116 124 -38.8 155.9 43.3 155.9C125.4 155.9 202.6 123.9 260.7 65.9001C318.8 7.80008 350.7 -69.3999 350.7 -151.5C350.7 -233.6 318.7 -310.8 260.7 -368.9C202.7 -427 125.5 -458.9 43.3 -458.9Z" fill="#BFDCF7"/>
|
||||
<path d="M152 1002.8C141.1 1002.8 130.2 1002.3 119.2 1001.3C73.3 997.1 29.2 984.1 -11.9 962.8C-53.1 941.5 -89.1 913 -119.1 878C-150.1 841.7 -173.3 800.1 -187.9 754.2C-202.5 708.3 -207.6 661 -203.3 613.5C-199.1 567.6 -186.1 523.5 -164.8 482.4C-143.5 441.3 -115 405.2 -80 375.3C-43.7 344.3 -2.09998 321.1 43.8 306.5C89.7 291.9 137 286.8 184.5 291.1C230.4 295.3 274.5 308.3 315.6 329.6C356.7 350.9 392.8 379.4 422.7 414.4C453.7 450.7 476.9 492.3 491.5 538.2C506.1 584.1 511.2 631.4 506.9 678.9C502.7 724.8 489.7 768.9 468.4 810C447.1 851.1 418.6 887.2 383.6 917.1C347.3 948.1 305.7 971.3 259.8 985.9C224.6 997.1 188.4 1002.8 152 1002.8ZM152.2 340.5C121.1 340.5 89.8 345.3 59.3 355C-18.5 379.8 -82 433.3 -119.5 505.8C-157 578.3 -164 661 -139.3 738.8C-114.5 816.5 -61 880 11.5 917.5C55.5 940.3 103.4 951.8 151.5 951.8C182.6 951.8 213.9 947 244.4 937.3C322.2 912.6 385.6 859 423.1 786.6C460.6 714.1 467.6 631.4 442.9 553.6C418.2 475.8 364.6 412.4 292.2 374.9C248.2 352 200.4 340.5 152.2 340.5Z" fill="url(#paint1_linear)"/>
|
||||
<path d="M1623.4 1024.5C1568.3 1024.5 1514.9 1013.7 1464.7 992.5C1416.1 972 1372.5 942.6 1335.1 905.1C1297.6 867.6 1268.2 824 1247.7 775.5C1226.4 725.2 1215.7 671.8 1215.7 616.8C1215.7 561.8 1226.5 508.3 1247.7 458.1C1268.2 409.5 1297.6 365.9 1335.1 328.5C1372.6 291 1416.2 261.6 1464.7 241.1C1515 219.8 1568.4 209.1 1623.4 209.1C1678.4 209.1 1731.9 219.9 1782.1 241.1C1830.7 261.6 1874.3 291 1911.7 328.5C1949.1 366 1978.6 409.6 1999.1 458.1C2020.4 508.4 2031.1 561.8 2031.1 616.8C2031.1 671.8 2020.3 725.3 1999.1 775.5C1978.6 824.1 1949.2 867.7 1911.7 905.1C1874.2 942.5 1830.6 972 1782.1 992.5C1731.9 1013.7 1678.5 1024.5 1623.4 1024.5ZM1623.4 211.9C1568.7 211.9 1515.7 222.6 1465.8 243.7C1417.6 264.1 1374.3 293.3 1337.1 330.5C1299.9 367.7 1270.7 411 1250.3 459.2C1229.2 509.1 1218.5 562.1 1218.5 616.8C1218.5 671.5 1229.2 724.5 1250.3 774.4C1270.7 822.6 1299.9 865.9 1337.1 903.1C1374.3 940.3 1417.6 969.5 1465.8 989.9C1515.7 1011 1568.7 1021.7 1623.4 1021.7C1678.1 1021.7 1731.1 1011 1781 989.9C1829.2 969.5 1872.5 940.3 1909.7 903.1C1946.9 865.9 1976.1 822.6 1996.5 774.4C2017.6 724.5 2028.3 671.5 2028.3 616.8C2028.3 562.1 2017.6 509.1 1996.5 459.2C1976.1 411 1946.9 367.7 1909.7 330.5C1872.5 293.3 1829.2 264.1 1781 243.7C1731.1 222.6 1678.1 211.9 1623.4 211.9Z" fill="#BFDCF7"/>
|
||||
<path d="M1624.9 1078.8C1623.2 1078.8 1621.9 1077.5 1621.9 1075.8C1621.9 1074.1 1623.2 1072.8 1624.9 1072.8C1626.6 1072.8 1627.9 1074.1 1627.9 1075.8C1627.9 1077.5 1626.6 1078.8 1624.9 1078.8ZM1584.7 1077.2C1583 1077.1 1581.8 1075.6 1581.9 1074C1582 1072.3 1583.5 1071.1 1585.1 1071.3C1586.7 1071.4 1588 1072.9 1587.8 1074.5C1587.7 1076.1 1586.4 1077.3 1584.8 1077.3C1584.9 1077.2 1584.8 1077.2 1584.7 1077.2ZM1661.8 1074.2C1661.7 1072.5 1662.9 1071.1 1664.5 1071C1666.2 1070.8 1667.6 1072.1 1667.7 1073.7C1667.9 1075.4 1666.6 1076.8 1665 1077C1664.9 1077 1664.8 1077 1664.7 1077C1663.3 1077 1662 1075.8 1661.8 1074.2ZM1544.8 1072.2C1543.2 1071.9 1542.1 1070.4 1542.4 1068.7C1542.7 1067.1 1544.2 1066 1545.9 1066.3C1547.5 1066.6 1548.6 1068.1 1548.4 1069.8C1548.2 1071.3 1546.9 1072.3 1545.4 1072.3C1545.1 1072.2 1545 1072.2 1544.8 1072.2ZM1701.5 1069.2C1701.2 1067.6 1702.3 1066 1703.9 1065.7C1705.5 1065.4 1707.1 1066.5 1707.4 1068.1C1707.7 1069.7 1706.6 1071.3 1705 1071.6C1704.8 1071.6 1704.6 1071.6 1704.5 1071.6C1703 1071.7 1701.7 1070.7 1701.5 1069.2ZM1505.5 1063.6C1503.9 1063.2 1502.9 1061.5 1503.4 1059.9C1503.8 1058.3 1505.5 1057.3 1507.1 1057.8C1508.7 1058.2 1509.7 1059.9 1509.2 1061.5C1508.8 1062.8 1507.6 1063.7 1506.3 1063.7C1506 1063.7 1505.7 1063.7 1505.5 1063.6ZM1740.6 1060.7C1740.2 1059.1 1741.1 1057.5 1742.7 1057C1744.3 1056.6 1745.9 1057.5 1746.4 1059.1C1746.8 1060.7 1745.9 1062.3 1744.3 1062.8C1744 1062.9 1743.8 1062.9 1743.5 1062.9C1742.1 1063 1740.9 1062.1 1740.6 1060.7ZM1467 1051.7C1465.4 1051.1 1464.6 1049.4 1465.2 1047.9C1465.8 1046.3 1467.5 1045.5 1469 1046.1C1470.5 1046.7 1471.4 1048.4 1470.8 1049.9C1470.4 1051.1 1469.2 1051.9 1468 1051.9C1467.7 1051.9 1467.4 1051.8 1467 1051.7ZM1778.7 1048.9C1778.1 1047.3 1778.9 1045.6 1780.5 1045C1782.1 1044.4 1783.8 1045.2 1784.4 1046.8C1785 1048.4 1784.2 1050.1 1782.6 1050.6C1782.3 1050.7 1781.9 1050.8 1781.6 1050.8C1780.3 1050.9 1779.2 1050.1 1778.7 1048.9ZM1429.8 1036.4C1428.3 1035.7 1427.6 1033.9 1428.3 1032.4C1429 1030.9 1430.8 1030.2 1432.3 1030.9C1433.8 1031.6 1434.5 1033.4 1433.8 1034.9C1433.3 1036 1432.2 1036.6 1431.1 1036.6C1430.6 1036.7 1430.2 1036.6 1429.8 1036.4ZM1815.7 1033.7C1815 1032.2 1815.6 1030.4 1817.1 1029.7C1818.6 1029 1820.4 1029.6 1821.1 1031.1C1821.8 1032.6 1821.2 1034.4 1819.7 1035.1C1819.3 1035.3 1818.8 1035.4 1818.4 1035.4C1817.3 1035.5 1816.2 1034.8 1815.7 1033.7ZM1394 1018C1392.6 1017.2 1392.1 1015.3 1392.9 1013.9C1393.7 1012.5 1395.6 1012 1397 1012.8C1398.4 1013.6 1398.9 1015.5 1398.1 1016.9C1397.5 1017.9 1396.5 1018.4 1395.5 1018.4C1395 1018.3 1394.5 1018.2 1394 1018ZM1851.2 1015.4C1850.4 1014 1850.8 1012.1 1852.3 1011.3C1853.7 1010.5 1855.6 1010.9 1856.4 1012.4C1857.2 1013.8 1856.7 1015.7 1855.3 1016.5C1854.8 1016.8 1854.3 1016.9 1853.8 1016.9C1852.8 1016.9 1851.8 1016.4 1851.2 1015.4ZM1360 996.4C1358.6 995.4 1358.3 993.6 1359.2 992.2C1360.1 990.8 1362 990.5 1363.4 991.4C1364.8 992.3 1365.1 994.2 1364.2 995.6C1363.6 996.4 1362.7 996.9 1361.7 996.9C1361.1 997 1360.5 996.8 1360 996.4ZM1885 994.1C1884 992.7 1884.4 990.9 1885.7 989.9C1887.1 988.9 1888.9 989.3 1889.9 990.6C1890.9 991.9 1890.5 993.8 1889.2 994.8C1888.7 995.2 1888.1 995.3 1887.5 995.3C1886.5 995.3 1885.6 994.9 1885 994.1ZM1328 972.1C1326.7 971 1326.6 969.1 1327.6 967.9C1328.7 966.6 1330.6 966.5 1331.8 967.5C1333.1 968.6 1333.2 970.5 1332.2 971.7C1331.6 972.4 1330.7 972.8 1329.9 972.8C1329.2 972.8 1328.5 972.5 1328 972.1ZM1916.8 969.9C1915.7 968.6 1915.9 966.7 1917.2 965.7C1918.5 964.6 1920.4 964.8 1921.4 966.1C1922.5 967.4 1922.3 969.3 1921 970.3C1920.4 970.8 1919.8 971 1919.1 971C1918.3 970.9 1917.4 970.6 1916.8 969.9ZM1298.2 945C1297 943.8 1297 941.9 1298.2 940.8C1299.4 939.6 1301.3 939.6 1302.4 940.8C1303.6 942 1303.6 943.9 1302.4 945C1301.8 945.6 1301 945.9 1300.3 945.9C1299.5 945.9 1298.8 945.6 1298.2 945ZM1946.4 943C1945.2 941.8 1945.2 939.9 1946.4 938.8C1947.6 937.6 1949.5 937.6 1950.6 938.8C1951.8 940 1951.8 941.9 1950.6 943C1950 943.6 1949.2 943.9 1948.5 943.9C1947.8 943.9 1947 943.6 1946.4 943ZM1270.9 915.5C1269.8 914.2 1270 912.3 1271.3 911.3C1272.6 910.2 1274.4 910.4 1275.5 911.6C1276.6 912.9 1276.4 914.8 1275.2 915.8C1274.6 916.3 1273.9 916.5 1273.3 916.5C1272.3 916.5 1271.5 916.2 1270.9 915.5ZM1973.6 913.6C1972.3 912.5 1972.2 910.6 1973.2 909.4C1974.3 908.1 1976.1 908 1977.4 909C1978.7 910.1 1978.8 912 1977.8 913.2C1977.2 913.9 1976.4 914.3 1975.5 914.3C1974.8 914.3 1974.2 914.1 1973.6 913.6ZM1246.2 883.7C1245.2 882.4 1245.6 880.5 1246.9 879.5C1248.3 878.5 1250.1 878.9 1251.1 880.2C1252.1 881.6 1251.7 883.4 1250.4 884.4C1249.9 884.8 1249.3 884.9 1248.7 884.9C1247.7 885 1246.8 884.5 1246.2 883.7ZM1998.1 882.1C1996.7 881.1 1996.4 879.3 1997.4 877.9C1998.3 876.6 2000.2 876.2 2001.6 877.2C2003 878.2 2003.3 880 2002.3 881.4C2001.7 882.2 2000.8 882.7 1999.8 882.7C1999.3 882.6 1998.7 882.4 1998.1 882.1ZM1224.4 849.9C1223.6 848.5 1224 846.6 1225.5 845.8C1226.9 845 1228.8 845.4 1229.6 846.9C1230.4 848.3 1230 850.2 1228.5 851C1228 851.3 1227.5 851.4 1227 851.4C122Line truncated
|
||||
<path d="M1623.4 927.1C1540.5 927.1 1462.5 894.8 1403.9 836.2C1345.3 777.6 1313 699.6 1313 616.7C1313 533.8 1345.3 455.8 1403.9 397.2C1462.5 338.6 1540.5 306.3 1623.4 306.3C1706.3 306.3 1784.3 338.6 1842.9 397.2C1901.5 455.8 1933.8 533.8 1933.8 616.7C1933.8 699.6 1901.5 777.6 1842.9 836.2C1784.3 894.8 1706.3 927.1 1623.4 927.1ZM1623.4 309.3C1541.3 309.3 1464.1 341.3 1406 399.3C1347.9 457.4 1316 534.6 1316 616.7C1316 698.8 1348 776 1406 834.1C1464.1 892.2 1541.3 924.1 1623.4 924.1C1705.5 924.1 1782.7 892.1 1840.8 834.1C1898.9 776 1930.8 698.8 1930.8 616.7C1930.8 534.6 1898.8 457.4 1840.8 399.3C1782.7 341.3 1705.5 309.3 1623.4 309.3Z" fill="#BFDCF7"/>
|
||||
<path d="M1020.2 53.1321H1029V44.3321H1020.2V53.1321Z" fill="#AFD6F2"/>
|
||||
<path d="M1011.36 61.9707H1020.16V53.1707H1011.36V61.9707Z" fill="#AFD6F2"/>
|
||||
</g>
|
||||
<defs>
|
||||
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0"/>
|
||||
</pattern>
|
||||
<linearGradient id="paint0_linear" x1="1494.04" y1="-133.81" x2="2137.01" y2="327.196" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D4E9FF"/>
|
||||
<stop offset="0.289" stop-color="#D0E7FE"/>
|
||||
<stop offset="0.5452" stop-color="#C6E0FA"/>
|
||||
<stop offset="0.6485" stop-color="#BFDCF7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="-83.521" y1="378.246" x2="387.177" y2="914.058" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D4E9FF"/>
|
||||
<stop offset="0.289" stop-color="#D0E7FE"/>
|
||||
<stop offset="0.5452" stop-color="#C6E0FA"/>
|
||||
<stop offset="0.6485" stop-color="#BFDCF7"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0">
|
||||
<path d="M0 0H1826V460H0V0Z" fill="white"/>
|
||||
</clipPath>
|
||||
<image id="image0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZEAAAGQCAYAAABvfV3yAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 25 KiB |
@@ -1,5 +1,5 @@
|
||||
import React, { HTMLProps } from 'react';
|
||||
import { css } from 'emotion';
|
||||
import { css, cx } from 'emotion';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { stylesFactory, useTheme } from '../../themes';
|
||||
|
||||
@@ -24,6 +24,8 @@ export interface LayoutProps extends Omit<HTMLProps<HTMLDivElement>, 'align' | '
|
||||
export interface ContainerProps {
|
||||
padding?: Spacing;
|
||||
margin?: Spacing;
|
||||
grow?: number;
|
||||
shrink?: number;
|
||||
}
|
||||
|
||||
export const Layout: React.FC<LayoutProps> = ({
|
||||
@@ -84,10 +86,26 @@ export const VerticalGroup: React.FC<Omit<LayoutProps, 'orientation' | 'wrap'>>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export const Container: React.FC<ContainerProps> = ({ children, padding, margin }) => {
|
||||
export const Container: React.FC<ContainerProps> = ({ children, padding, margin, grow, shrink }) => {
|
||||
const theme = useTheme();
|
||||
const styles = getContainerStyles(theme, padding, margin);
|
||||
return <div className={styles.wrapper}>{children}</div>;
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
styles.wrapper,
|
||||
grow !== undefined &&
|
||||
css`
|
||||
flex-grow: ${grow};
|
||||
`,
|
||||
shrink !== undefined &&
|
||||
css`
|
||||
flex-shrink: ${shrink};
|
||||
`
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = stylesFactory(
|
||||
|
||||
@@ -190,5 +190,5 @@ export const filterFieldsByNameTransformRegistryItem: TransformerRegistyItem<Fil
|
||||
editor: FilterByNameTransformerEditor,
|
||||
transformation: standardTransformers.filterFieldsByNameTransformer,
|
||||
name: 'Filter by name',
|
||||
description: 'Filter fields by name',
|
||||
description: 'Removes part of the query results using a regex pattern. The pattern can be inclusive or exclusive.',
|
||||
};
|
||||
+3
-2
@@ -133,6 +133,7 @@ export const filterFramesByRefIdTransformRegistryItem: TransformerRegistyItem<Fi
|
||||
id: DataTransformerID.filterByRefId,
|
||||
editor: FilterByRefIdTransformerEditor,
|
||||
transformation: standardTransformers.filterFramesByRefIdTransformer,
|
||||
name: 'Filter by refId',
|
||||
description: 'Filter results by refId',
|
||||
name: 'Filter data by query',
|
||||
description:
|
||||
'Filter data by query. This is useful if you are sharing the results from a different panel that has many queries and you want to only visualize a subset of that in this panel.',
|
||||
};
|
||||
+2
-1
@@ -15,5 +15,6 @@ export const labelsToFieldsTransformerRegistryItem: TransformerRegistyItem<Label
|
||||
editor: LabelsAsFieldsTransformerEditor,
|
||||
transformation: standardTransformers.labelsToFieldsTransformer,
|
||||
name: 'Labels to fields',
|
||||
description: 'Groups series by time and return labels or tags as fields',
|
||||
description: `Groups series by time and return labels or tags as fields.
|
||||
Useful for showing time series with labels in a table where each label key becomes a seperate column`,
|
||||
};
|
||||
+3
-2
@@ -221,6 +221,7 @@ export const organizeFieldsTransformRegistryItem: TransformerRegistyItem<Organiz
|
||||
id: DataTransformerID.organize,
|
||||
editor: OrganizeFieldsTransformerEditor,
|
||||
transformation: standardTransformers.organizeFieldsTransformer,
|
||||
name: 'Organize fields',
|
||||
description: 'Order, filter and rename fields',
|
||||
name: 'Change order, hide and rename',
|
||||
description:
|
||||
"Allows the user to re-order, hide, or rename columns. Useful when data source doesn't allow overrides for visualizing data.",
|
||||
};
|
||||
+3
-2
@@ -42,6 +42,7 @@ export const seriesToFieldsTransformerRegistryItem: TransformerRegistyItem<Serie
|
||||
id: DataTransformerID.seriesToColumns,
|
||||
editor: SeriesToFieldsTransformerEditor,
|
||||
transformation: standardTransformers.seriesToColumnsTransformer,
|
||||
name: 'Join by field',
|
||||
description: 'Joins many time series / data frames by a field',
|
||||
name: 'Outer join',
|
||||
description:
|
||||
'Joins many time series/tables by a field. This can be used to outer join multiple time series on the _time_ field to show many time series in one table.',
|
||||
};
|
||||
@@ -99,6 +99,7 @@ export { DataLinkInput } from './DataLinks/DataLinkInput';
|
||||
export { DataLinksContextMenu } from './DataLinks/DataLinksContextMenu';
|
||||
export { SeriesIcon } from './Legend/SeriesIcon';
|
||||
export { InfoBox } from './InfoBox/InfoBox';
|
||||
export { FeatureInfoBox } from './InfoBox/FeatureInfoBox';
|
||||
|
||||
export { JSONFormatter } from './JSONFormatter/JSONFormatter';
|
||||
export { JsonExplorer } from './JSONFormatter/json_explorer/json_explorer';
|
||||
@@ -138,6 +139,7 @@ export * from './Select/Select';
|
||||
export { ButtonSelect } from './Select/ButtonSelect';
|
||||
|
||||
export { HorizontalGroup, VerticalGroup, Container } from './Layout/Layout';
|
||||
export { Badge, BadgeColor, BadgeProps } from './Badge/Badge';
|
||||
export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup';
|
||||
|
||||
export { Input } from './Input/Input';
|
||||
|
||||
@@ -11,5 +11,5 @@
|
||||
},
|
||||
"exclude": ["dist", "node_modules"],
|
||||
"extends": "@grafana/tsconfig",
|
||||
"include": ["src/**/*.ts*", "../../public/app/types/sanitize-url.d.ts"]
|
||||
"include": ["src/**/*.ts*", "../../public/app/types/sanitize-url.d.ts", "../../public/app/types/svg.d.ts"]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { DocsId } from '@grafana/data';
|
||||
|
||||
// TODO: Documentation links
|
||||
const DOCS_LINKS: Record<DocsId, string> = {
|
||||
[DocsId.Transformations]: 'https://docs.grafana.com',
|
||||
[DocsId.FieldConfig]: 'https://docs.grafana.com',
|
||||
[DocsId.FieldConfigOverrides]: 'https://docs.grafana.com',
|
||||
};
|
||||
|
||||
export const getDocsLink = (id: DocsId) => DOCS_LINKS[id];
|
||||
@@ -2,18 +2,20 @@ import React, { useCallback } from 'react';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import {
|
||||
DataFrame,
|
||||
FeatureState,
|
||||
FieldConfigPropertyItem,
|
||||
FieldConfigSource,
|
||||
PanelPlugin,
|
||||
SelectableValue,
|
||||
VariableSuggestionsScope,
|
||||
} from '@grafana/data';
|
||||
import { Container, Counter, Field, fieldMatchersUI, Label, ValuePicker } from '@grafana/ui';
|
||||
import { Container, Counter, FeatureInfoBox, Field, fieldMatchersUI, Label, useTheme, ValuePicker } from '@grafana/ui';
|
||||
import { getDataLinksVariableSuggestions } from '../../../panel/panellinks/link_srv';
|
||||
import { OverrideEditor } from './OverrideEditor';
|
||||
import groupBy from 'lodash/groupBy';
|
||||
import { OptionsGroup } from './OptionsGroup';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { css } from 'emotion';
|
||||
|
||||
interface Props {
|
||||
plugin: PanelPlugin;
|
||||
@@ -27,6 +29,8 @@ interface Props {
|
||||
* Expects the container div to have size set and will fill it 100%
|
||||
*/
|
||||
export const OverrideFieldConfigEditor: React.FC<Props> = props => {
|
||||
const theme = useTheme();
|
||||
const { config } = props;
|
||||
const onOverrideChange = (index: number, override: any) => {
|
||||
const { config } = props;
|
||||
let overrides = cloneDeep(config.overrides);
|
||||
@@ -104,6 +108,19 @@ export const OverrideFieldConfigEditor: React.FC<Props> = props => {
|
||||
|
||||
return (
|
||||
<div aria-label={selectors.components.OverridesConfigEditor.content}>
|
||||
{config.overrides.length === 0 && (
|
||||
<FeatureInfoBox
|
||||
title="Overrides"
|
||||
featureState={FeatureState.beta}
|
||||
// url={getDocsLink(DocsId.FieldConfigOverrides)}
|
||||
className={css`
|
||||
margin: ${theme.spacing.md};
|
||||
`}
|
||||
>
|
||||
Field options overrides give you a fine grained control over how your data is displayed.
|
||||
</FeatureInfoBox>
|
||||
)}
|
||||
|
||||
{renderOverrides()}
|
||||
{renderAddOverride()}
|
||||
</div>
|
||||
|
||||
+34
-9
@@ -1,8 +1,18 @@
|
||||
import React from 'react';
|
||||
import { Button, Container, CustomScrollbar, stylesFactory, useTheme, ValuePicker, VerticalGroup } from '@grafana/ui';
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
CustomScrollbar,
|
||||
FeatureInfoBox,
|
||||
stylesFactory,
|
||||
useTheme,
|
||||
ValuePicker,
|
||||
VerticalGroup,
|
||||
} from '@grafana/ui';
|
||||
import {
|
||||
DataFrame,
|
||||
DataTransformerConfig,
|
||||
FeatureState,
|
||||
GrafanaTheme,
|
||||
SelectableValue,
|
||||
standardTransformersRegistry,
|
||||
@@ -114,13 +124,23 @@ export class TransformationsEditor extends React.PureComponent<Props> {
|
||||
|
||||
renderNoAddedTransformsState() {
|
||||
return (
|
||||
<>
|
||||
<p className="muted">
|
||||
Transformations allow you to combine, re-order, hide and rename specific parts the the data set before being
|
||||
visualized. <br />
|
||||
Choose one of the transformations below to start with:
|
||||
</p>
|
||||
|
||||
<VerticalGroup spacing={'lg'}>
|
||||
<Container grow={1}>
|
||||
<FeatureInfoBox
|
||||
title="Transformations"
|
||||
featureState={FeatureState.beta}
|
||||
// url={getDocsLink(DocsId.Transformations)}
|
||||
>
|
||||
<p>
|
||||
Transformations allow you to join, calculate, re-order, hide and rename your query results before being
|
||||
visualized. <br />
|
||||
Many transforms are not suitable if your using the Graph visualisation as it currently only supports time
|
||||
series. <br />
|
||||
It can help to switch to Table visualisation to understand what a transformation is doing. <br />
|
||||
</p>
|
||||
<p>Select one of the transformations below to start.</p>
|
||||
</FeatureInfoBox>
|
||||
</Container>
|
||||
<VerticalGroup>
|
||||
{standardTransformersRegistry.list().map(t => {
|
||||
return (
|
||||
@@ -136,7 +156,7 @@ export class TransformationsEditor extends React.PureComponent<Props> {
|
||||
);
|
||||
})}
|
||||
</VerticalGroup>
|
||||
</>
|
||||
</VerticalGroup>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -170,6 +190,11 @@ const getTransformationCardStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
border: none;
|
||||
padding: ${theme.spacing.sm};
|
||||
|
||||
// hack because these cards use classes from a very different card for some reason
|
||||
.add-data-source-item-text {
|
||||
font-size: ${theme.typography.size.md};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.bg3};
|
||||
box-shadow: none;
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import { GrafanaTheme, PanelPluginMeta, PluginState } from '@grafana/data';
|
||||
import { styleMixins, stylesFactory, useTheme } from '@grafana/ui';
|
||||
import { Badge, BadgeProps, styleMixins, stylesFactory, useTheme } from '@grafana/ui';
|
||||
import { css, cx } from 'emotion';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { PanelPluginBadge } from '../../plugins/PluginSignatureBadge';
|
||||
|
||||
interface Props {
|
||||
isCurrent: boolean;
|
||||
@@ -126,3 +125,36 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
});
|
||||
|
||||
export default VizTypePickerPlugin;
|
||||
|
||||
interface PanelPluginBadgeProps {
|
||||
plugin: PanelPluginMeta;
|
||||
}
|
||||
const PanelPluginBadge: React.FC<PanelPluginBadgeProps> = ({ plugin }) => {
|
||||
const display = getPanelStateBadgeDisplayModel(plugin);
|
||||
|
||||
if (plugin.state !== PluginState.deprecated && plugin.state !== PluginState.alpha) {
|
||||
return null;
|
||||
}
|
||||
return <Badge color={display.color} text={display.text} icon={display.icon} tooltip={display.tooltip} />;
|
||||
};
|
||||
|
||||
function getPanelStateBadgeDisplayModel(panel: PanelPluginMeta): BadgeProps {
|
||||
switch (panel.state) {
|
||||
case PluginState.deprecated:
|
||||
return {
|
||||
text: 'Deprecated',
|
||||
icon: 'exclamation-triangle',
|
||||
color: 'red',
|
||||
tooltip: `${panel.name} panel is deprecated`,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
text: 'Alpha',
|
||||
icon: 'rocket',
|
||||
color: 'blue',
|
||||
tooltip: `${panel.name} panel is experimental`,
|
||||
};
|
||||
}
|
||||
|
||||
PanelPluginBadge.displayName = 'PanelPluginBadge';
|
||||
@@ -1,61 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Icon, IconName, stylesFactory, Tooltip, useTheme } from '@grafana/ui';
|
||||
import {
|
||||
getColorFromHexRgbOrName,
|
||||
GrafanaTheme,
|
||||
PanelPluginMeta,
|
||||
PluginSignatureStatus,
|
||||
PluginState,
|
||||
} from '@grafana/data';
|
||||
import { css } from 'emotion';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { Badge, BadgeProps } from '@grafana/ui';
|
||||
import { PluginSignatureStatus } from '@grafana/data';
|
||||
|
||||
interface Props {
|
||||
status: PluginSignatureStatus;
|
||||
}
|
||||
|
||||
export const PluginSignatureBadge: React.FC<Props> = ({ status }) => {
|
||||
const theme = useTheme();
|
||||
const display = getSignatureDisplayModel(status);
|
||||
const styles = getStyles(theme, display);
|
||||
|
||||
return (
|
||||
<Tooltip content={display.tooltip} placement="left">
|
||||
<div className={styles.wrapper}>
|
||||
<Icon name={display.icon} size="sm" />
|
||||
<span>{display.text}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
return <Badge text={display.text} color={display.color} icon={display.icon} tooltip={display.tooltip} />;
|
||||
};
|
||||
|
||||
interface PanelPluginBadgeProps {
|
||||
plugin: PanelPluginMeta;
|
||||
}
|
||||
export const PanelPluginBadge: React.FC<PanelPluginBadgeProps> = ({ plugin }) => {
|
||||
const theme = useTheme();
|
||||
const display = getPanelStateBadgeDisplayModel(plugin);
|
||||
const styles = getStyles(theme, display);
|
||||
|
||||
if (plugin.state !== PluginState.deprecated && plugin.state !== PluginState.alpha) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<Icon name={display.icon} size="sm" />
|
||||
<span>{display.text}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface DisplayModel {
|
||||
text: string;
|
||||
icon: IconName;
|
||||
color: string;
|
||||
tooltip: string;
|
||||
}
|
||||
|
||||
function getSignatureDisplayModel(signature: PluginSignatureStatus): DisplayModel {
|
||||
function getSignatureDisplayModel(signature: PluginSignatureStatus): BadgeProps {
|
||||
switch (signature) {
|
||||
case PluginSignatureStatus.internal:
|
||||
return { text: 'Core', icon: 'cube', color: 'blue', tooltip: 'Core plugin that is bundled with Grafana' };
|
||||
@@ -80,71 +36,4 @@ function getSignatureDisplayModel(signature: PluginSignatureStatus): DisplayMode
|
||||
return { text: 'Unsigned', icon: 'exclamation-triangle', color: 'red', tooltip: 'Unsigned external plugin' };
|
||||
}
|
||||
|
||||
function getPanelStateBadgeDisplayModel(panel: PanelPluginMeta): DisplayModel {
|
||||
switch (panel.state) {
|
||||
case PluginState.deprecated:
|
||||
return {
|
||||
text: 'Deprecated',
|
||||
icon: 'exclamation-triangle',
|
||||
color: 'red',
|
||||
tooltip: `${panel.name} panel is deprecated`,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
text: 'Alpha',
|
||||
icon: 'rocket',
|
||||
color: 'blue',
|
||||
tooltip: `${panel.name} panel is experimental`,
|
||||
};
|
||||
}
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme, model: DisplayModel) => {
|
||||
let sourceColor = getColorFromHexRgbOrName(model.color);
|
||||
let borderColor = '';
|
||||
let bgColor = '';
|
||||
let textColor = '';
|
||||
|
||||
if (theme.isDark) {
|
||||
bgColor = tinycolor(sourceColor)
|
||||
.darken(38)
|
||||
.toString();
|
||||
borderColor = tinycolor(sourceColor)
|
||||
.darken(25)
|
||||
.toString();
|
||||
textColor = tinycolor(sourceColor)
|
||||
.lighten(45)
|
||||
.toString();
|
||||
} else {
|
||||
bgColor = tinycolor(sourceColor)
|
||||
.lighten(30)
|
||||
.toString();
|
||||
borderColor = tinycolor(sourceColor)
|
||||
.lighten(15)
|
||||
.toString();
|
||||
textColor = tinycolor(sourceColor)
|
||||
.darken(40)
|
||||
.toString();
|
||||
}
|
||||
|
||||
return {
|
||||
wrapper: css`
|
||||
font-size: ${theme.typography.size.sm};
|
||||
display: inline-flex;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
margin-top: 6px;
|
||||
background: ${bgColor};
|
||||
border: 1px solid ${borderColor};
|
||||
color: ${textColor};
|
||||
|
||||
> span {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
PluginSignatureBadge.displayName = 'PluginSignatureBadge';
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
declare module '*.svg' {
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export const svg = 'svg';
|
||||
@@ -108,6 +108,11 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
|
||||
loader: 'file-loader',
|
||||
options: { name: 'static/img/[name].[hash:8].[ext]' },
|
||||
},
|
||||
],
|
||||
},
|
||||
// https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-3
|
||||
|
||||
@@ -86,10 +86,6 @@ module.exports = (env = {}) =>
|
||||
sourceMap: false,
|
||||
preserveUrl: false,
|
||||
}),
|
||||
{
|
||||
test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
|
||||
loader: 'file-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
Reference in new issue
Block a user