@perses-dev/components 0.24.0 → 0.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Dialog/Dialog.d.ts +2 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +12 -1
- package/dist/Dialog/Dialog.js.map +1 -1
- package/dist/{EChart.d.ts → EChart/EChart.d.ts} +1 -1
- package/dist/EChart/EChart.d.ts.map +1 -0
- package/dist/EChart/EChart.js.map +1 -0
- package/dist/EChart/index.d.ts +2 -0
- package/dist/EChart/index.d.ts.map +1 -0
- package/dist/EChart/index.js +15 -0
- package/dist/EChart/index.js.map +1 -0
- package/dist/GaugeChart/GaugeChart.d.ts +1 -2
- package/dist/GaugeChart/GaugeChart.d.ts.map +1 -1
- package/dist/GaugeChart/GaugeChart.js.map +1 -1
- package/dist/InfoTooltip/InfoTooltip.d.ts.map +1 -1
- package/dist/InfoTooltip/InfoTooltip.js +7 -3
- package/dist/InfoTooltip/InfoTooltip.js.map +1 -1
- package/dist/Legend/Legend.d.ts +1 -2
- package/dist/Legend/Legend.d.ts.map +1 -1
- package/dist/Legend/Legend.js.map +1 -1
- package/dist/StatChart/StatChart.d.ts +1 -2
- package/dist/StatChart/StatChart.d.ts.map +1 -1
- package/dist/StatChart/StatChart.js.map +1 -1
- package/dist/cjs/Dialog/Dialog.js +11 -0
- package/dist/cjs/EChart/index.js +28 -0
- package/dist/cjs/InfoTooltip/InfoTooltip.js +7 -3
- package/dist/cjs/theme/component-overrides/alert.js +102 -0
- package/dist/cjs/theme/theme.js +2 -11
- package/dist/theme/component-overrides/alert.d.ts +3 -0
- package/dist/theme/component-overrides/alert.d.ts.map +1 -0
- package/dist/theme/component-overrides/alert.js +96 -0
- package/dist/theme/component-overrides/alert.js.map +1 -0
- package/dist/theme/theme.d.ts.map +1 -1
- package/dist/theme/theme.js +3 -12
- package/dist/theme/theme.js.map +1 -1
- package/package.json +5 -2
- package/dist/EChart.d.ts.map +0 -1
- package/dist/EChart.js.map +0 -1
- /package/dist/{EChart.js → EChart/EChart.js} +0 -0
- /package/dist/cjs/{EChart.js → EChart/EChart.js} +0 -0
package/dist/Dialog/Dialog.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ButtonProps, DialogActions, DialogContentProps as MuiDialogContentProps, DialogProps, DialogTitleProps } from '@mui/material';
|
|
2
|
+
import { ButtonProps, DialogActions, DialogContentProps as MuiDialogContentProps, DialogProps, DialogTitleProps, Theme } from '@mui/material';
|
|
3
3
|
export interface DialogHeaderProps extends DialogTitleProps {
|
|
4
4
|
/**
|
|
5
5
|
* Callback fired when close button is clicked. If undefined, close button will not appear in header.
|
|
@@ -16,6 +16,7 @@ export interface DialogContentProps extends MuiDialogContentProps {
|
|
|
16
16
|
export declare const Dialog: {
|
|
17
17
|
({ children, ...props }: DialogProps): JSX.Element;
|
|
18
18
|
Header: ({ children, onClose, ...props }: DialogHeaderProps) => JSX.Element;
|
|
19
|
+
Form: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
|
|
19
20
|
Content: ({ children, width, sx, ...props }: DialogContentProps) => JSX.Element;
|
|
20
21
|
PrimaryButton: ({ children, ...props }: DialogButtonProps) => JSX.Element;
|
|
21
22
|
SecondaryButton: ({ children, ...props }: DialogButtonProps) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,EAGhB,KAAK,EACN,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,oBAAY,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqDD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CAnDT,iBAAiB;;iDAaR,kBAAkB;4CAM7B,iBAAiB;8CAMf,iBAAiB;;CA0ByC,CAAC"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
14
14
|
import React from 'react';
|
|
15
|
-
import { Button, Dialog as MuiDialog, DialogActions, DialogContent, DialogTitle, IconButton } from '@mui/material';
|
|
15
|
+
import { Button, Dialog as MuiDialog, DialogActions, DialogContent, DialogTitle, IconButton, styled } from '@mui/material';
|
|
16
16
|
import CloseIcon from 'mdi-material-ui/Close';
|
|
17
17
|
import { combineSx } from '../utils';
|
|
18
18
|
const Header = ({ children , onClose , ...props })=>{
|
|
@@ -51,6 +51,16 @@ const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ _jsx(Button, {
|
|
|
51
51
|
...props,
|
|
52
52
|
children: children
|
|
53
53
|
});
|
|
54
|
+
/*
|
|
55
|
+
* Material-ui has a prop "scroll=paper" that is specifically for dialog header and actions to be sticky and body to scroll,
|
|
56
|
+
* but that doesn't work when dialog content is wrapped in form.
|
|
57
|
+
* https://github.com/mui-org/material-ui/issues/13253
|
|
58
|
+
* This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog
|
|
59
|
+
*/ const Form = styled('form')({
|
|
60
|
+
overflowY: 'auto',
|
|
61
|
+
display: 'flex',
|
|
62
|
+
flexDirection: 'column'
|
|
63
|
+
});
|
|
54
64
|
/**
|
|
55
65
|
* Render the CSS of the dialog's close button, according to the given material theme.
|
|
56
66
|
* @param theme material theme
|
|
@@ -66,6 +76,7 @@ export const Dialog = ({ children , ...props })=>/*#__PURE__*/ _jsx(MuiDialog, {
|
|
|
66
76
|
children: children
|
|
67
77
|
});
|
|
68
78
|
Dialog.Header = Header;
|
|
79
|
+
Dialog.Form = Form;
|
|
69
80
|
Dialog.Content = Content;
|
|
70
81
|
Dialog.PrimaryButton = PrimaryButton;
|
|
71
82
|
Dialog.SecondaryButton = SecondaryButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport {\n Button,\n ButtonProps,\n Dialog as MuiDialog,\n DialogActions,\n DialogContent,\n DialogContentProps as MuiDialogContentProps,\n DialogProps,\n DialogTitle,\n DialogTitleProps,\n IconButton,\n Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n /**\n * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n */\n onClose?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport interface DialogContentProps extends MuiDialogContentProps {\n /**\n * @default 500\n */\n width?: number;\n}\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps) => {\n return (\n <>\n <DialogTitle {...props}>{children}</DialogTitle>\n {onClose && (\n <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n <CloseIcon />\n </IconButton>\n )}\n </>\n );\n};\n\nconst Content = ({ children, width = 500, sx, ...props }: DialogContentProps) => (\n <DialogContent dividers {...props} sx={combineSx({ width: `${width}px` }, sx)}>\n {children}\n </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps) => (\n <Button variant=\"contained\" type=\"submit\" {...props}>\n {children}\n </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps) => (\n <Button variant=\"outlined\" color=\"secondary\" {...props}>\n {children}\n </Button>\n);\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme) => {\n return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","theme","position","top","spacing","right","Actions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SACEC,MAAM,EAENC,MAAM,IAAIC,SAAS,EACnBC,aAAa,EACbC,aAAa,EAGbC,WAAW,EAEXC,UAAU,
|
|
1
|
+
{"version":3,"sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport {\n Button,\n ButtonProps,\n Dialog as MuiDialog,\n DialogActions,\n DialogContent,\n DialogContentProps as MuiDialogContentProps,\n DialogProps,\n DialogTitle,\n DialogTitleProps,\n IconButton,\n styled,\n Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n /**\n * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n */\n onClose?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport interface DialogContentProps extends MuiDialogContentProps {\n /**\n * @default 500\n */\n width?: number;\n}\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps) => {\n return (\n <>\n <DialogTitle {...props}>{children}</DialogTitle>\n {onClose && (\n <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n <CloseIcon />\n </IconButton>\n )}\n </>\n );\n};\n\nconst Content = ({ children, width = 500, sx, ...props }: DialogContentProps) => (\n <DialogContent dividers {...props} sx={combineSx({ width: `${width}px` }, sx)}>\n {children}\n </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps) => (\n <Button variant=\"contained\" type=\"submit\" {...props}>\n {children}\n </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps) => (\n <Button variant=\"outlined\" color=\"secondary\" {...props}>\n {children}\n </Button>\n);\n\n/*\n * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form = styled('form')({\n overflowY: 'auto',\n display: 'flex',\n flexDirection: 'column',\n});\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme) => {\n return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","styled","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","theme","position","top","spacing","right","Actions"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ECharts, EChartsCoreOption } from 'echarts/core';
|
|
3
3
|
import { SxProps, Theme } from '@mui/material';
|
|
4
|
-
import { EChartsTheme } from '
|
|
4
|
+
import { EChartsTheme } from '../model';
|
|
5
5
|
export interface MouseEventsParameters<T> {
|
|
6
6
|
componentType: string;
|
|
7
7
|
seriesType: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport { isEqual, debounce } from 'lodash-es';\nimport { EChartsTheme } from '../model';\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n componentType: string;\n seriesType: string;\n seriesIndex: number;\n seriesName: string;\n name: string;\n dataIndex: number;\n data: Record<string, unknown> & T;\n dataType: string;\n value: number | number[];\n color: string;\n info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n params: MouseEventsParameters<T>,\n // This is potentially undefined for testing purposes\n instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n 'click',\n 'dblclick',\n 'mousedown',\n 'mousemove',\n 'mouseup',\n 'mouseover',\n 'mouseout',\n 'globalout',\n 'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n dataZoomId: string;\n // start and end not returned unless dataZoom is based on percentProp,\n // which is for cases when a dataZoom component controls multiple axes\n start?: number;\n end?: number;\n // startValue and endValue return data index for 'category' axes,\n // for axis types 'value' and 'time', actual values are returned\n startValue?: number;\n endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n dataIndex: number;\n dataIndexInside: number;\n seriesIndex: number;\n // highlight action can effect multiple connected charts\n escapeConnect?: boolean;\n // whether blur state was triggered\n notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n type: BatchEventName;\n batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n option: EChartsCoreOption;\n theme?: string | EChartsTheme;\n renderer?: 'canvas' | 'svg';\n sx?: SxProps<Theme>;\n onEvents?: OnEventsType<T>;\n _instance?: React.MutableRefObject<ECharts | undefined>;\n onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n option,\n theme,\n renderer,\n sx,\n onEvents,\n _instance,\n onChartInitialized,\n}: EChartsProps<T>) {\n const initialOption = useRef<EChartsCoreOption>(option);\n const prevOption = useRef<EChartsCoreOption>(option);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const chartElement = useRef<ECharts | null>(null);\n\n // Initialize chart, dispose on unmount\n useLayoutEffect(() => {\n if (containerRef.current === null || chartElement.current !== null) return;\n chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n if (chartElement.current === undefined) return;\n chartElement.current.setOption(initialOption.current, true);\n onChartInitialized?.(chartElement.current);\n if (_instance !== undefined) {\n _instance.current = chartElement.current;\n }\n return () => {\n if (chartElement.current === null) return;\n chartElement.current.dispose();\n chartElement.current = null;\n };\n }, [_instance, onChartInitialized, theme, renderer]);\n\n // Update chart data when option changes\n useEffect(() => {\n if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n if (!chartElement.current) return;\n chartElement.current.setOption(option, true);\n prevOption.current = option;\n }, [option]);\n\n // Resize chart, cleanup listener on unmount\n useLayoutEffect(() => {\n const updateSize = debounce(() => {\n if (!chartElement.current) return;\n chartElement.current.resize();\n }, 200);\n window.addEventListener('resize', updateSize);\n updateSize();\n return () => {\n window.removeEventListener('resize', updateSize);\n };\n }, []);\n\n // Bind and unbind chart events passed as prop\n useEffect(() => {\n const chart = chartElement.current;\n if (!chart || onEvents === undefined) return;\n bindEvents(chart, onEvents);\n return () => {\n if (chart === undefined) return;\n if (chart.isDisposed() === true) return;\n for (const event in onEvents) {\n chart.off(event);\n }\n };\n }, [onEvents]);\n\n useEffect(() => {\n const updateSize = debounce(() => {\n if (!chartElement.current) return;\n chartElement.current.resize();\n }, 200);\n updateSize();\n }, [sx]);\n\n return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n if (events === undefined) return;\n\n function bindEvent(eventName: EventName, OnEventFunction: unknown) {\n if (typeof OnEventFunction === 'function') {\n if (isMouseEvent(eventName)) {\n instance.on(eventName, (params) => OnEventFunction(params, instance));\n } else if (isBatchEvent(eventName)) {\n instance.on(eventName, (params) => OnEventFunction(params));\n } else {\n instance.on(eventName, () => OnEventFunction(null, instance));\n }\n }\n }\n\n for (const eventName in events) {\n if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n const customEvent = events[eventName as EventName] ?? null;\n if (customEvent) {\n bindEvent(eventName as EventName, customEvent);\n }\n }\n }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["React","useEffect","useLayoutEffect","useRef","init","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/EChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// Copyright 2023 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
export * from './EChart';
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/EChart/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './EChart';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,UAAU,CAAC"}
|
|
@@ -6,7 +6,7 @@ export declare type GaugeSeries = {
|
|
|
6
6
|
value: GaugeChartValue;
|
|
7
7
|
label: string;
|
|
8
8
|
};
|
|
9
|
-
interface GaugeChartProps {
|
|
9
|
+
export interface GaugeChartProps {
|
|
10
10
|
width: number;
|
|
11
11
|
height: number;
|
|
12
12
|
data: GaugeSeries;
|
|
@@ -20,5 +20,4 @@ export declare function GaugeChart(props: GaugeChartProps): JSX.Element;
|
|
|
20
20
|
* to ensure size stays within given range
|
|
21
21
|
*/
|
|
22
22
|
export declare function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number): string;
|
|
23
|
-
export {};
|
|
24
23
|
//# sourceMappingURL=GaugeChart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU1D,oBAAY,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU1D,oBAAY,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAgJhD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAQrG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/GaugeChart/GaugeChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useDeepMemo } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n value: GaugeChartValue;\n label: string;\n};\n\ninterface GaugeChartProps {\n width: number;\n height: number;\n data: GaugeSeries;\n unit: UnitOptions;\n axisLine: GaugeSeriesOption['axisLine'];\n max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n const { width, height, data, unit, axisLine, max } = props;\n const chartsTheme = useChartsTheme();\n\n // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n const option: EChartsCoreOption = useDeepMemo(() => {\n if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;\n\n // adjusts fontSize depending on number of characters\n const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);\n\n return {\n title: {\n show: false,\n },\n tooltip: {\n show: false,\n },\n series: [\n {\n type: 'gauge',\n center: ['50%', '65%'],\n radius: '86%',\n startAngle: 200,\n endAngle: -20,\n min: 0,\n max,\n silent: true,\n progress: {\n show: true,\n width: PROGRESS_WIDTH,\n itemStyle: {\n color: 'auto',\n },\n },\n pointer: {\n show: false,\n },\n axisLine: {\n lineStyle: {\n color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n width: PROGRESS_WIDTH,\n },\n },\n axisTick: {\n show: false,\n distance: 0,\n },\n splitLine: {\n show: false,\n },\n axisLabel: {\n show: false,\n distance: -18,\n color: '#999',\n fontSize: 12,\n },\n anchor: {\n show: false,\n },\n title: {\n show: false,\n },\n detail: {\n show: false,\n },\n data: [\n {\n value: data.value,\n },\n ],\n },\n {\n type: 'gauge',\n center: ['50%', '65%'],\n radius: '100%',\n startAngle: 200,\n endAngle: -20,\n min: 0,\n max,\n pointer: {\n show: true,\n // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n length: 10,\n width: 5,\n offsetCenter: [0, '-49%'],\n itemStyle: {\n color: 'auto',\n },\n },\n axisLine,\n axisTick: {\n show: false,\n },\n splitLine: {\n show: false,\n },\n axisLabel: {\n show: false,\n },\n detail: {\n show: true,\n width: '60%',\n borderRadius: 8,\n offsetCenter: [0, '-9%'],\n color: 'inherit', // allows value color to match active threshold color\n fontSize: valueSizeClamp,\n formatter: (value: number) => {\n return formatValue(value, unit);\n },\n },\n data: [\n {\n value: data.value,\n name: data.label,\n // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n // https://echarts.apache.org/en/option.html#series-gauge.data.title\n title: {\n show: true,\n color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n offsetCenter: [0, '55%'],\n overflow: 'truncate',\n fontSize: 12,\n width: width * 0.8,\n },\n },\n ],\n },\n ],\n };\n }, [data, width, height, chartsTheme, unit, axisLine, max]);\n\n return (\n <EChart\n sx={{\n width: width,\n height: height,\n padding: `${chartsTheme.container.padding.default}px`,\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n />\n );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number) {\n const MIN_SIZE = 3;\n const MAX_SIZE = 24;\n const SIZE_MULTIPLIER = 0.7;\n const formattedValue = formatValue(value, unit);\n const valueCharacters = formattedValue.length ?? 2;\n const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","unit","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/GaugeChart/GaugeChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useDeepMemo } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n value: GaugeChartValue;\n label: string;\n};\n\nexport interface GaugeChartProps {\n width: number;\n height: number;\n data: GaugeSeries;\n unit: UnitOptions;\n axisLine: GaugeSeriesOption['axisLine'];\n max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n const { width, height, data, unit, axisLine, max } = props;\n const chartsTheme = useChartsTheme();\n\n // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n const option: EChartsCoreOption = useDeepMemo(() => {\n if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;\n\n // adjusts fontSize depending on number of characters\n const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);\n\n return {\n title: {\n show: false,\n },\n tooltip: {\n show: false,\n },\n series: [\n {\n type: 'gauge',\n center: ['50%', '65%'],\n radius: '86%',\n startAngle: 200,\n endAngle: -20,\n min: 0,\n max,\n silent: true,\n progress: {\n show: true,\n width: PROGRESS_WIDTH,\n itemStyle: {\n color: 'auto',\n },\n },\n pointer: {\n show: false,\n },\n axisLine: {\n lineStyle: {\n color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n width: PROGRESS_WIDTH,\n },\n },\n axisTick: {\n show: false,\n distance: 0,\n },\n splitLine: {\n show: false,\n },\n axisLabel: {\n show: false,\n distance: -18,\n color: '#999',\n fontSize: 12,\n },\n anchor: {\n show: false,\n },\n title: {\n show: false,\n },\n detail: {\n show: false,\n },\n data: [\n {\n value: data.value,\n },\n ],\n },\n {\n type: 'gauge',\n center: ['50%', '65%'],\n radius: '100%',\n startAngle: 200,\n endAngle: -20,\n min: 0,\n max,\n pointer: {\n show: true,\n // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n length: 10,\n width: 5,\n offsetCenter: [0, '-49%'],\n itemStyle: {\n color: 'auto',\n },\n },\n axisLine,\n axisTick: {\n show: false,\n },\n splitLine: {\n show: false,\n },\n axisLabel: {\n show: false,\n },\n detail: {\n show: true,\n width: '60%',\n borderRadius: 8,\n offsetCenter: [0, '-9%'],\n color: 'inherit', // allows value color to match active threshold color\n fontSize: valueSizeClamp,\n formatter: (value: number) => {\n return formatValue(value, unit);\n },\n },\n data: [\n {\n value: data.value,\n name: data.label,\n // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n // https://echarts.apache.org/en/option.html#series-gauge.data.title\n title: {\n show: true,\n color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n offsetCenter: [0, '55%'],\n overflow: 'truncate',\n fontSize: 12,\n width: width * 0.8,\n },\n },\n ],\n },\n ],\n };\n }, [data, width, height, chartsTheme, unit, axisLine, max]);\n\n return (\n <EChart\n sx={{\n width: width,\n height: height,\n padding: `${chartsTheme.container.padding.default}px`,\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n />\n );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number) {\n const MIN_SIZE = 3;\n const MAX_SIZE = 24;\n const SIZE_MULTIPLIER = 0.7;\n const formattedValue = formatValue(value, unit);\n const valueCharacters = formattedValue.length ?? 2;\n const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","unit","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,gBAkBlB,CAAC"}
|
|
@@ -14,6 +14,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
14
14
|
import React from 'react';
|
|
15
15
|
import { styled, Tooltip as MuiTooltip, tooltipClasses, Typography } from '@mui/material';
|
|
16
16
|
export const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay })=>{
|
|
17
|
+
// Only wrap in a div if passed a non-element. This enables the tooltip to
|
|
18
|
+
// support text with a wrapper div while avoiding breaking css on element
|
|
19
|
+
// children by unnecessarily wrapping them.
|
|
20
|
+
const formattedChildren = /*#__PURE__*/ React.isValidElement(children) ? children : /*#__PURE__*/ _jsx("div", {
|
|
21
|
+
children: children
|
|
22
|
+
});
|
|
17
23
|
return /*#__PURE__*/ _jsx(StyledTooltip, {
|
|
18
24
|
arrow: true,
|
|
19
25
|
id: id,
|
|
@@ -24,9 +30,7 @@ export const InfoTooltip = ({ id , title , description , placement , children ,
|
|
|
24
30
|
}),
|
|
25
31
|
enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
|
|
26
32
|
enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
|
|
27
|
-
children:
|
|
28
|
-
children: children
|
|
29
|
-
})
|
|
33
|
+
children: formattedChildren
|
|
30
34
|
});
|
|
31
35
|
};
|
|
32
36
|
const TooltipContent = ({ title , description })=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport {\n styled,\n TooltipProps as MuiTooltipProps,\n Tooltip as MuiTooltip,\n tooltipClasses,\n Typography,\n} from '@mui/material';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n description: string;\n children: React.ReactNode;\n id?: string;\n title?: string;\n placement?: TooltipPlacement;\n enterDelay?: number; // default is 500ms\n enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n id,\n title,\n description,\n placement,\n children,\n enterDelay,\n enterNextDelay,\n}: InfoTooltipProps) => {\n return (\n <StyledTooltip\n arrow\n id={id}\n placement={placement ?? 'top'}\n title={<TooltipContent title={title} description={description} />}\n enterDelay={enterDelay ?? 500}\n enterNextDelay={enterNextDelay ?? 500}\n >\n
|
|
1
|
+
{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport {\n styled,\n TooltipProps as MuiTooltipProps,\n Tooltip as MuiTooltip,\n tooltipClasses,\n Typography,\n} from '@mui/material';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n description: string;\n children: React.ReactNode;\n id?: string;\n title?: string;\n placement?: TooltipPlacement;\n enterDelay?: number; // default is 500ms\n enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n id,\n title,\n description,\n placement,\n children,\n enterDelay,\n enterNextDelay,\n}: InfoTooltipProps) => {\n // Only wrap in a div if passed a non-element. This enables the tooltip to\n // support text with a wrapper div while avoiding breaking css on element\n // children by unnecessarily wrapping them.\n const formattedChildren = React.isValidElement(children) ? children : <div>{children}</div>;\n\n return (\n <StyledTooltip\n arrow\n id={id}\n placement={placement ?? 'top'}\n title={<TooltipContent title={title} description={description} />}\n enterDelay={enterDelay ?? 500}\n enterNextDelay={enterNextDelay ?? 500}\n >\n {formattedChildren}\n </StyledTooltip>\n );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n return (\n <>\n {title && (\n <Typography\n variant=\"body2\"\n sx={(theme) => ({\n color: theme.palette.text.primary,\n fontWeight: theme.typography.fontWeightMedium,\n })}\n >\n {title}\n </Typography>\n )}\n <Typography\n variant=\"caption\"\n sx={(theme) => ({\n color: theme.palette.text.primary,\n })}\n >\n {description}\n </Typography>\n </>\n );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n [`& .${tooltipClasses.tooltip}`]: {\n backgroundColor: theme.palette.background.tooltip,\n color: theme.palette.text.primary,\n maxWidth: '300px',\n padding: theme.spacing(1),\n boxShadow: theme.shadows[1],\n },\n [`& .${tooltipClasses.arrow}`]: {\n color: theme.palette.background.tooltip,\n },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","formattedChildren","isValidElement","div","StyledTooltip","arrow","TooltipContent","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"mappings":"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"}
|
package/dist/Legend/Legend.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { LegendOptions, LegendItem } from '../model';
|
|
3
|
-
interface LegendProps {
|
|
3
|
+
export interface LegendProps {
|
|
4
4
|
width: number;
|
|
5
5
|
height: number;
|
|
6
6
|
data: LegendItem[];
|
|
7
7
|
options: LegendOptions;
|
|
8
8
|
}
|
|
9
9
|
export declare function Legend({ width, height, options, data }: LegendProps): JSX.Element;
|
|
10
|
-
export {};
|
|
11
10
|
//# sourceMappingURL=Legend.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAIrD,
|
|
1
|
+
{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAIrD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,WAAW,eA+BnE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { LegendOptions, LegendItem } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\n\
|
|
1
|
+
{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { LegendOptions, LegendItem } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\n\nexport interface LegendProps {\n width: number;\n height: number;\n data: LegendItem[];\n options: LegendOptions;\n}\n\nexport function Legend({ width, height, options, data }: LegendProps) {\n if (options.position === 'Right') {\n return (\n <Box\n sx={{\n width: width,\n height: '100%',\n position: 'absolute',\n top: 0,\n right: 0,\n overflowX: 'hidden',\n overflowY: 'scroll',\n }}\n >\n <ListLegend items={data} />\n </Box>\n );\n }\n\n return (\n <Box\n sx={{\n width: width,\n height: height,\n position: 'absolute',\n bottom: 0,\n }}\n >\n <CompactLegend items={data} height={height} />\n </Box>\n );\n}\n"],"names":["Box","ListLegend","CompactLegend","Legend","width","height","options","data","position","sx","top","right","overflowX","overflowY","items","bottom"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAC1C,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAShD,OAAO,SAASC,MAAM,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAe,EAAE;IACpE,IAAID,OAAO,CAACE,QAAQ,KAAK,OAAO,EAAE;QAChC,qBACE,KAACR,GAAG;YACFS,EAAE,EAAE;gBACFL,KAAK,EAAEA,KAAK;gBACZC,MAAM,EAAE,MAAM;gBACdG,QAAQ,EAAE,UAAU;gBACpBE,GAAG,EAAE,CAAC;gBACNC,KAAK,EAAE,CAAC;gBACRC,SAAS,EAAE,QAAQ;gBACnBC,SAAS,EAAE,QAAQ;aACpB;sBAED,cAAA,KAACZ,UAAU;gBAACa,KAAK,EAAEP,IAAI;cAAI;UACvB,CACN;IACJ,CAAC;IAED,qBACE,KAACP,GAAG;QACFS,EAAE,EAAE;YACFL,KAAK,EAAEA,KAAK;YACZC,MAAM,EAAEA,MAAM;YACdG,QAAQ,EAAE,UAAU;YACpBO,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACb,aAAa;YAACY,KAAK,EAAEP,IAAI;YAAEF,MAAM,EAAEA,MAAM;UAAI;MAC1C,CACN;AACJ,CAAC"}
|
|
@@ -6,7 +6,7 @@ export interface StatChartData {
|
|
|
6
6
|
calculatedValue?: number;
|
|
7
7
|
seriesData?: GraphSeries;
|
|
8
8
|
}
|
|
9
|
-
interface StatChartProps {
|
|
9
|
+
export interface StatChartProps {
|
|
10
10
|
width: number;
|
|
11
11
|
height: number;
|
|
12
12
|
data: StatChartData;
|
|
@@ -14,5 +14,4 @@ interface StatChartProps {
|
|
|
14
14
|
sparkline?: LineSeriesOption;
|
|
15
15
|
}
|
|
16
16
|
export declare function StatChart(props: StatChartProps): JSX.Element;
|
|
17
|
-
export {};
|
|
18
17
|
//# sourceMappingURL=StatChart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,
|
|
1
|
+
{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAyF9C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n calculatedValue?: number;\n seriesData?: GraphSeries;\n}\n\
|
|
1
|
+
{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n calculatedValue?: number;\n seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n width: number;\n height: number;\n data: StatChartData;\n unit: UnitOptions;\n sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n const { width, height, data, unit, sparkline } = props;\n const chartsTheme = useChartsTheme();\n\n const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\n\n const option: EChartsCoreOption = useMemo(() => {\n if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n const series = data.seriesData;\n const statSeries: LineSeriesOption[] = [];\n\n if (sparkline !== undefined) {\n const lineSeries = {\n type: 'line',\n data: [...series.values],\n zlevel: 1,\n symbol: 'none',\n animation: false,\n silent: true,\n };\n const mergedSeries = merge(lineSeries, sparkline);\n statSeries.push(mergedSeries);\n }\n\n const option = {\n title: {\n show: false,\n },\n grid: {\n show: false,\n top: '35%', // adds space above sparkline\n right: 0,\n bottom: 0,\n left: 0,\n containLabel: false,\n },\n xAxis: {\n type: 'time',\n show: false,\n boundaryGap: false,\n },\n yAxis: {\n type: 'value',\n show: false,\n },\n tooltip: {\n show: false,\n },\n series: statSeries,\n };\n\n return option;\n }, [data, chartsTheme, sparkline]);\n\n const isLargePanel = width > 250 && height > 180;\n // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n const charactersAdjust = formattedValue.length;\n const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n const containerPadding = `${chartsTheme.container.padding.default}px`;\n\n return (\n <Box sx={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>\n <Typography\n variant=\"h3\"\n sx={(theme) => ({\n color: theme.palette.text.primary,\n fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`,\n })}\n >\n {formattedValue}\n </Typography>\n {sparkline !== undefined && (\n <Box sx={{ flex: 1 }}>\n <EChart\n sx={{\n width: '100%',\n height: '100%',\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n renderer=\"svg\"\n />\n </Box>\n )}\n </Box>\n );\n}\n"],"names":["useMemo","Box","Typography","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","min","containerPadding","container","padding","default","sx","display","flexDirection","variant","theme","color","palette","text","primary","fontSize","flex","echartsTheme","renderer"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAChD,SAASC,KAAK,QAAQ,WAAW,CAAC;AAClC,SAASC,GAAG,QAA2B,cAAc,CAAC;AACtD,SAASC,SAAS,IAAIC,gBAAgB,QAA0B,gBAAgB,CAAC;AACjF,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,oBAAoB,CAAC;AACvG,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,cAAc,QAAQ,gCAAgC,CAAC;AAChE,SAASC,WAAW,QAAqB,gBAAgB,CAAC;AAC1D,SAASC,MAAM,QAAQ,WAAW,CAAC;AAGnCV,GAAG,CAAC;IAACE,gBAAgB;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC,cAAc;IAAEC,gBAAgB;IAAEC,cAAc;CAAC,CAAC,CAAC;AAE3G,MAAMI,cAAc,GAAG,EAAE,AAAC;AAC1B,MAAMC,cAAc,GAAG,EAAE,AAAC;AAe1B,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAM,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,IAAI,CAAA,EAAEC,IAAI,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGL,KAAK,AAAC;IACvD,MAAMM,WAAW,GAAGZ,cAAc,EAAE,AAAC;IAErC,MAAMa,cAAc,GAAGJ,IAAI,CAACK,eAAe,KAAKC,SAAS,GAAG,EAAE,GAAGd,WAAW,CAACQ,IAAI,CAACK,eAAe,EAAEJ,IAAI,CAAC,AAAC;IAEzG,MAAMM,MAAM,GAAsB5B,OAAO,CAAC,IAAM;QAC9C,IAAIqB,IAAI,CAACQ,UAAU,KAAKF,SAAS,EAAE,OAAOH,WAAW,CAACM,YAAY,CAAC;QAEnE,MAAMC,MAAM,GAAGV,IAAI,CAACQ,UAAU,AAAC;QAC/B,MAAMG,UAAU,GAAuB,EAAE,AAAC;QAE1C,IAAIT,SAAS,KAAKI,SAAS,EAAE;YAC3B,MAAMM,UAAU,GAAG;gBACjBC,IAAI,EAAE,MAAM;gBACZb,IAAI,EAAE;uBAAIU,MAAM,CAACI,MAAM;iBAAC;gBACxBC,MAAM,EAAE,CAAC;gBACTC,MAAM,EAAE,MAAM;gBACdC,SAAS,EAAE,KAAK;gBAChBC,MAAM,EAAE,IAAI;aACb,AAAC;YACF,MAAMC,YAAY,GAAGrC,KAAK,CAAC8B,UAAU,EAAEV,SAAS,CAAC,AAAC;YAClDS,UAAU,CAACS,IAAI,CAACD,YAAY,CAAC,CAAC;QAChC,CAAC;QAED,MAAMZ,MAAM,GAAG;YACbc,KAAK,EAAE;gBACLC,IAAI,EAAE,KAAK;aACZ;YACDC,IAAI,EAAE;gBACJD,IAAI,EAAE,KAAK;gBACXE,GAAG,EAAE,KAAK;gBACVC,KAAK,EAAE,CAAC;gBACRC,MAAM,EAAE,CAAC;gBACTC,IAAI,EAAE,CAAC;gBACPC,YAAY,EAAE,KAAK;aACpB;YACDC,KAAK,EAAE;gBACLhB,IAAI,EAAE,MAAM;gBACZS,IAAI,EAAE,KAAK;gBACXQ,WAAW,EAAE,KAAK;aACnB;YACDC,KAAK,EAAE;gBACLlB,IAAI,EAAE,OAAO;gBACbS,IAAI,EAAE,KAAK;aACZ;YACDU,OAAO,EAAE;gBACPV,IAAI,EAAE,KAAK;aACZ;YACDZ,MAAM,EAAEC,UAAU;SACnB,AAAC;QAEF,OAAOJ,MAAM,CAAC;IAChB,CAAC,EAAE;QAACP,IAAI;QAAEG,WAAW;QAAED,SAAS;KAAC,CAAC,AAAC;IAEnC,MAAM+B,YAAY,GAAGnC,KAAK,GAAG,GAAG,IAAIC,MAAM,GAAG,GAAG,AAAC;IACjD,4FAA4F;IAC5F,MAAMmC,gBAAgB,GAAG9B,cAAc,CAAC+B,MAAM,AAAC;IAC/C,MAAMC,SAAS,GAAGH,YAAY,KAAK,IAAI,GAAGtC,cAAc,GAAG0C,IAAI,CAACC,GAAG,CAACxC,KAAK,EAAEC,MAAM,CAAC,GAAGmC,gBAAgB,AAAC;IAEtG,MAAMK,gBAAgB,GAAG,CAAC,EAAEpC,WAAW,CAACqC,SAAS,CAACC,OAAO,CAACC,OAAO,CAAC,EAAE,CAAC,AAAC;IAEtE,qBACE,MAAC9D,GAAG;QAAC+D,EAAE,EAAE;YAAE5C,MAAM,EAAE,MAAM;YAAED,KAAK,EAAE,MAAM;YAAE8C,OAAO,EAAE,MAAM;YAAEC,aAAa,EAAE,QAAQ;SAAE;;0BAClF,KAAChE,UAAU;gBACTiE,OAAO,EAAC,IAAI;gBACZH,EAAE,EAAE,CAACI,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,QAAQ,EAAE,CAAC,MAAM,EAAE1D,cAAc,CAAC,IAAI,EAAE0C,SAAS,CAAC,IAAI,EAAEzC,cAAc,CAAC,GAAG,CAAC;wBAC3E8C,OAAO,EAAE,CAAC,EAAEF,gBAAgB,CAAC,CAAC,EAAEA,gBAAgB,CAAC,GAAG,EAAEA,gBAAgB,CAAC,CAAC;qBACzE,CAAA,AAAC;0BAEDnC,cAAc;cACJ;YACZF,SAAS,KAAKI,SAAS,kBACtB,KAAC1B,GAAG;gBAAC+D,EAAE,EAAE;oBAAEU,IAAI,EAAE,CAAC;iBAAE;0BAClB,cAAA,KAAC5D,MAAM;oBACLkD,EAAE,EAAE;wBACF7C,KAAK,EAAE,MAAM;wBACbC,MAAM,EAAE,MAAM;qBACf;oBACDQ,MAAM,EAAEA,MAAM;oBACdwC,KAAK,EAAE5C,WAAW,CAACmD,YAAY;oBAC/BC,QAAQ,EAAC,KAAK;kBACd;cACE,AACP;;MACG,CACN;AACJ,CAAC"}
|
|
@@ -64,6 +64,16 @@ const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxRuntime
|
|
|
64
64
|
...props,
|
|
65
65
|
children: children
|
|
66
66
|
});
|
|
67
|
+
/*
|
|
68
|
+
* Material-ui has a prop "scroll=paper" that is specifically for dialog header and actions to be sticky and body to scroll,
|
|
69
|
+
* but that doesn't work when dialog content is wrapped in form.
|
|
70
|
+
* https://github.com/mui-org/material-ui/issues/13253
|
|
71
|
+
* This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog
|
|
72
|
+
*/ const Form = (0, _material.styled)('form')({
|
|
73
|
+
overflowY: 'auto',
|
|
74
|
+
display: 'flex',
|
|
75
|
+
flexDirection: 'column'
|
|
76
|
+
});
|
|
67
77
|
/**
|
|
68
78
|
* Render the CSS of the dialog's close button, according to the given material theme.
|
|
69
79
|
* @param theme material theme
|
|
@@ -79,6 +89,7 @@ const Dialog = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_ma
|
|
|
79
89
|
children: children
|
|
80
90
|
});
|
|
81
91
|
Dialog.Header = Header;
|
|
92
|
+
Dialog.Form = Form;
|
|
82
93
|
Dialog.Content = Content;
|
|
83
94
|
Dialog.PrimaryButton = PrimaryButton;
|
|
84
95
|
Dialog.SecondaryButton = SecondaryButton;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// Copyright 2023 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
_exportStar(require("./EChart"), exports);
|
|
18
|
+
function _exportStar(from, to) {
|
|
19
|
+
Object.keys(from).forEach(function(k) {
|
|
20
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function() {
|
|
23
|
+
return from[k];
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
return from;
|
|
28
|
+
}
|
|
@@ -27,6 +27,12 @@ function _interopRequireDefault(obj) {
|
|
|
27
27
|
};
|
|
28
28
|
}
|
|
29
29
|
const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay })=>{
|
|
30
|
+
// Only wrap in a div if passed a non-element. This enables the tooltip to
|
|
31
|
+
// support text with a wrapper div while avoiding breaking css on element
|
|
32
|
+
// children by unnecessarily wrapping them.
|
|
33
|
+
const formattedChildren = /*#__PURE__*/ _react.default.isValidElement(children) ? children : /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
|
|
34
|
+
children: children
|
|
35
|
+
});
|
|
30
36
|
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledTooltip, {
|
|
31
37
|
arrow: true,
|
|
32
38
|
id: id,
|
|
@@ -37,9 +43,7 @@ const InfoTooltip = ({ id , title , description , placement , children , enterDe
|
|
|
37
43
|
}),
|
|
38
44
|
enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
|
|
39
45
|
enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
|
|
40
|
-
children:
|
|
41
|
-
children: children
|
|
42
|
-
})
|
|
46
|
+
children: formattedChildren
|
|
43
47
|
});
|
|
44
48
|
};
|
|
45
49
|
const TooltipContent = ({ title , description })=>{
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
// Copyright 2023 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "MuiAlert", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: ()=>MuiAlert
|
|
20
|
+
});
|
|
21
|
+
const _material = require("@mui/material");
|
|
22
|
+
const MuiAlert = {
|
|
23
|
+
defaultProps: {
|
|
24
|
+
variant: 'standard',
|
|
25
|
+
severity: 'success'
|
|
26
|
+
},
|
|
27
|
+
styleOverrides: {
|
|
28
|
+
standardError: ({ theme })=>{
|
|
29
|
+
return theme.palette.mode === 'dark' ? {
|
|
30
|
+
...theme.typography.body1,
|
|
31
|
+
backgroundColor: theme.palette.error.dark,
|
|
32
|
+
color: theme.palette.error.light,
|
|
33
|
+
[`& .${_material.alertClasses.icon}`]: {
|
|
34
|
+
color: theme.palette.error.main
|
|
35
|
+
}
|
|
36
|
+
} : {
|
|
37
|
+
...theme.typography.body1,
|
|
38
|
+
backgroundColor: theme.palette.error.light,
|
|
39
|
+
color: theme.palette.error.dark,
|
|
40
|
+
[`& .${_material.alertClasses.icon}`]: {
|
|
41
|
+
color: theme.palette.error.main
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
},
|
|
45
|
+
standardInfo: ({ theme })=>{
|
|
46
|
+
return theme.palette.mode === 'dark' ? {
|
|
47
|
+
...theme.typography.body1,
|
|
48
|
+
backgroundColor: theme.palette.info.dark,
|
|
49
|
+
color: theme.palette.info.light,
|
|
50
|
+
[`& .${_material.alertClasses.icon}`]: {
|
|
51
|
+
color: theme.palette.info.main
|
|
52
|
+
}
|
|
53
|
+
} : {
|
|
54
|
+
...theme.typography.body1,
|
|
55
|
+
backgroundColor: theme.palette.info.light,
|
|
56
|
+
color: theme.palette.info.dark,
|
|
57
|
+
[`& .${_material.alertClasses.icon}`]: {
|
|
58
|
+
color: theme.palette.info.main
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
},
|
|
62
|
+
standardSuccess: ({ theme })=>{
|
|
63
|
+
return theme.palette.mode === 'dark' ? {
|
|
64
|
+
...theme.typography.body1,
|
|
65
|
+
backgroundColor: theme.palette.success.dark,
|
|
66
|
+
color: theme.palette.success.light,
|
|
67
|
+
[`& .${_material.alertClasses.icon}`]: {
|
|
68
|
+
color: theme.palette.success.main
|
|
69
|
+
}
|
|
70
|
+
} : {
|
|
71
|
+
...theme.typography.body1,
|
|
72
|
+
backgroundColor: theme.palette.success.light,
|
|
73
|
+
color: theme.palette.success.dark,
|
|
74
|
+
[`& .${_material.alertClasses.icon}`]: {
|
|
75
|
+
color: theme.palette.success.main
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
},
|
|
79
|
+
standardWarning: ({ theme })=>{
|
|
80
|
+
return theme.palette.mode === 'dark' ? {
|
|
81
|
+
...theme.typography.body1,
|
|
82
|
+
backgroundColor: theme.palette.warning.dark,
|
|
83
|
+
color: theme.palette.warning.light,
|
|
84
|
+
[`& .${_material.alertClasses.icon}`]: {
|
|
85
|
+
color: theme.palette.warning.main
|
|
86
|
+
}
|
|
87
|
+
} : {
|
|
88
|
+
...theme.typography.body1,
|
|
89
|
+
backgroundColor: theme.palette.warning.light,
|
|
90
|
+
color: theme.palette.warning.dark,
|
|
91
|
+
[`& .${_material.alertClasses.icon}`]: {
|
|
92
|
+
color: theme.palette.warning.main
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
},
|
|
96
|
+
root: {
|
|
97
|
+
['& .' + _material.linkClasses.root]: {
|
|
98
|
+
textDecoration: 'underline'
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
};
|
package/dist/cjs/theme/theme.js
CHANGED
|
@@ -19,6 +19,7 @@ Object.defineProperty(exports, "getTheme", {
|
|
|
19
19
|
get: ()=>getTheme
|
|
20
20
|
});
|
|
21
21
|
const _material = require("@mui/material");
|
|
22
|
+
const _alert = require("./component-overrides/alert");
|
|
22
23
|
const _paletteOptions = require("./palette/palette-options");
|
|
23
24
|
const _typography = require("./typography");
|
|
24
25
|
const getModalBackgroundStyle = ({ theme })=>{
|
|
@@ -41,6 +42,7 @@ function getTheme(mode) {
|
|
|
41
42
|
}
|
|
42
43
|
// Overrides for component default prop values and styles go here
|
|
43
44
|
const components = {
|
|
45
|
+
MuiAlert: _alert.MuiAlert,
|
|
44
46
|
MuiFormControl: {
|
|
45
47
|
defaultProps: {
|
|
46
48
|
size: 'small'
|
|
@@ -65,16 +67,5 @@ const components = {
|
|
|
65
67
|
styleOverrides: {
|
|
66
68
|
paper: getModalBackgroundStyle
|
|
67
69
|
}
|
|
68
|
-
},
|
|
69
|
-
MuiAlert: {
|
|
70
|
-
styleOverrides: {
|
|
71
|
-
standardError: ({ theme })=>({
|
|
72
|
-
backgroundColor: theme.palette.designSystem.red[500],
|
|
73
|
-
color: theme.palette.common.white,
|
|
74
|
-
[`& .${_material.alertClasses.icon}`]: {
|
|
75
|
-
color: theme.palette.common.white
|
|
76
|
-
}
|
|
77
|
-
})
|
|
78
|
-
}
|
|
79
70
|
}
|
|
80
71
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/theme/component-overrides/alert.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,KAAK,EAA6B,MAAM,eAAe,CAAC;AAE7E,eAAO,MAAM,QAAQ,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,UAAU,CAwFlD,CAAC"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
// Copyright 2023 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
import { alertClasses, linkClasses } from '@mui/material';
|
|
14
|
+
export const MuiAlert = {
|
|
15
|
+
defaultProps: {
|
|
16
|
+
variant: 'standard',
|
|
17
|
+
severity: 'success'
|
|
18
|
+
},
|
|
19
|
+
styleOverrides: {
|
|
20
|
+
standardError: ({ theme })=>{
|
|
21
|
+
return theme.palette.mode === 'dark' ? {
|
|
22
|
+
...theme.typography.body1,
|
|
23
|
+
backgroundColor: theme.palette.error.dark,
|
|
24
|
+
color: theme.palette.error.light,
|
|
25
|
+
[`& .${alertClasses.icon}`]: {
|
|
26
|
+
color: theme.palette.error.main
|
|
27
|
+
}
|
|
28
|
+
} : {
|
|
29
|
+
...theme.typography.body1,
|
|
30
|
+
backgroundColor: theme.palette.error.light,
|
|
31
|
+
color: theme.palette.error.dark,
|
|
32
|
+
[`& .${alertClasses.icon}`]: {
|
|
33
|
+
color: theme.palette.error.main
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
},
|
|
37
|
+
standardInfo: ({ theme })=>{
|
|
38
|
+
return theme.palette.mode === 'dark' ? {
|
|
39
|
+
...theme.typography.body1,
|
|
40
|
+
backgroundColor: theme.palette.info.dark,
|
|
41
|
+
color: theme.palette.info.light,
|
|
42
|
+
[`& .${alertClasses.icon}`]: {
|
|
43
|
+
color: theme.palette.info.main
|
|
44
|
+
}
|
|
45
|
+
} : {
|
|
46
|
+
...theme.typography.body1,
|
|
47
|
+
backgroundColor: theme.palette.info.light,
|
|
48
|
+
color: theme.palette.info.dark,
|
|
49
|
+
[`& .${alertClasses.icon}`]: {
|
|
50
|
+
color: theme.palette.info.main
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
},
|
|
54
|
+
standardSuccess: ({ theme })=>{
|
|
55
|
+
return theme.palette.mode === 'dark' ? {
|
|
56
|
+
...theme.typography.body1,
|
|
57
|
+
backgroundColor: theme.palette.success.dark,
|
|
58
|
+
color: theme.palette.success.light,
|
|
59
|
+
[`& .${alertClasses.icon}`]: {
|
|
60
|
+
color: theme.palette.success.main
|
|
61
|
+
}
|
|
62
|
+
} : {
|
|
63
|
+
...theme.typography.body1,
|
|
64
|
+
backgroundColor: theme.palette.success.light,
|
|
65
|
+
color: theme.palette.success.dark,
|
|
66
|
+
[`& .${alertClasses.icon}`]: {
|
|
67
|
+
color: theme.palette.success.main
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
},
|
|
71
|
+
standardWarning: ({ theme })=>{
|
|
72
|
+
return theme.palette.mode === 'dark' ? {
|
|
73
|
+
...theme.typography.body1,
|
|
74
|
+
backgroundColor: theme.palette.warning.dark,
|
|
75
|
+
color: theme.palette.warning.light,
|
|
76
|
+
[`& .${alertClasses.icon}`]: {
|
|
77
|
+
color: theme.palette.warning.main
|
|
78
|
+
}
|
|
79
|
+
} : {
|
|
80
|
+
...theme.typography.body1,
|
|
81
|
+
backgroundColor: theme.palette.warning.light,
|
|
82
|
+
color: theme.palette.warning.dark,
|
|
83
|
+
[`& .${alertClasses.icon}`]: {
|
|
84
|
+
color: theme.palette.warning.main
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
},
|
|
88
|
+
root: {
|
|
89
|
+
['& .' + linkClasses.root]: {
|
|
90
|
+
textDecoration: 'underline'
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
//# sourceMappingURL=alert.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/theme/component-overrides/alert.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Components, Theme, alertClasses, linkClasses } from '@mui/material';\n\nexport const MuiAlert: Components<Theme>['MuiAlert'] = {\n defaultProps: {\n variant: 'standard',\n severity: 'success',\n },\n styleOverrides: {\n standardError: ({ theme }) => {\n return theme.palette.mode === 'dark'\n ? {\n ...theme.typography.body1,\n backgroundColor: theme.palette.error.dark,\n color: theme.palette.error.light,\n [`&\t.${alertClasses.icon}`]: {\n color: theme.palette.error.main,\n },\n }\n : {\n ...theme.typography.body1,\n backgroundColor: theme.palette.error.light,\n color: theme.palette.error.dark,\n [`&\t.${alertClasses.icon}`]: {\n color: theme.palette.error.main,\n },\n };\n },\n standardInfo: ({ theme }) => {\n return theme.palette.mode === 'dark'\n ? {\n ...theme.typography.body1,\n backgroundColor: theme.palette.info.dark,\n color: theme.palette.info.light,\n [`&\t.${alertClasses.icon}`]: {\n color: theme.palette.info.main,\n },\n }\n : {\n ...theme.typography.body1,\n backgroundColor: theme.palette.info.light,\n color: theme.palette.info.dark,\n [`&\t.${alertClasses.icon}`]: {\n color: theme.palette.info.main,\n },\n };\n },\n standardSuccess: ({ theme }) => {\n return theme.palette.mode === 'dark'\n ? {\n ...theme.typography.body1,\n backgroundColor: theme.palette.success.dark,\n color: theme.palette.success.light,\n [`&\t.${alertClasses.icon}`]: {\n color: theme.palette.success.main,\n },\n }\n : {\n ...theme.typography.body1,\n backgroundColor: theme.palette.success.light,\n color: theme.palette.success.dark,\n [`&\t.${alertClasses.icon}`]: {\n color: theme.palette.success.main,\n },\n };\n },\n standardWarning: ({ theme }) => {\n return theme.palette.mode === 'dark'\n ? {\n ...theme.typography.body1,\n backgroundColor: theme.palette.warning.dark,\n color: theme.palette.warning.light,\n [`&\t.${alertClasses.icon}`]: {\n color: theme.palette.warning.main,\n },\n }\n : {\n ...theme.typography.body1,\n backgroundColor: theme.palette.warning.light,\n color: theme.palette.warning.dark,\n [`&\t.${alertClasses.icon}`]: {\n color: theme.palette.warning.main,\n },\n };\n },\n root: {\n ['& .' + linkClasses.root]: {\n textDecoration: 'underline',\n },\n },\n },\n};\n"],"names":["alertClasses","linkClasses","MuiAlert","defaultProps","variant","severity","styleOverrides","standardError","theme","palette","mode","typography","body1","backgroundColor","error","dark","color","light","icon","main","standardInfo","info","standardSuccess","success","standardWarning","warning","root","textDecoration"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,WAAW,EAAgB,KAAK,
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,WAAW,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAkB9E;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,SAQzC"}
|
package/dist/theme/theme.js
CHANGED
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
11
|
// See the License for the specific language governing permissions and
|
|
12
12
|
// limitations under the License.
|
|
13
|
-
import { createTheme
|
|
13
|
+
import { createTheme } from '@mui/material';
|
|
14
|
+
import { MuiAlert } from './component-overrides/alert';
|
|
14
15
|
import { getPaletteOptions } from './palette/palette-options';
|
|
15
16
|
import { typography } from './typography';
|
|
16
17
|
const getModalBackgroundStyle = ({ theme })=>{
|
|
@@ -42,6 +43,7 @@ const getModalBackgroundStyle = ({ theme })=>{
|
|
|
42
43
|
}
|
|
43
44
|
// Overrides for component default prop values and styles go here
|
|
44
45
|
const components = {
|
|
46
|
+
MuiAlert,
|
|
45
47
|
MuiFormControl: {
|
|
46
48
|
defaultProps: {
|
|
47
49
|
size: 'small'
|
|
@@ -66,17 +68,6 @@ const components = {
|
|
|
66
68
|
styleOverrides: {
|
|
67
69
|
paper: getModalBackgroundStyle
|
|
68
70
|
}
|
|
69
|
-
},
|
|
70
|
-
MuiAlert: {
|
|
71
|
-
styleOverrides: {
|
|
72
|
-
standardError: ({ theme })=>({
|
|
73
|
-
backgroundColor: theme.palette.designSystem.red[500],
|
|
74
|
-
color: theme.palette.common.white,
|
|
75
|
-
[`& .${alertClasses.icon}`]: {
|
|
76
|
-
color: theme.palette.common.white
|
|
77
|
-
}
|
|
78
|
-
})
|
|
79
|
-
}
|
|
80
71
|
}
|
|
81
72
|
};
|
|
82
73
|
|
package/dist/theme/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/theme.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { createTheme, PaletteMode, ThemeOptions, Theme
|
|
1
|
+
{"version":3,"sources":["../../src/theme/theme.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { createTheme, PaletteMode, ThemeOptions, Theme } from '@mui/material';\nimport { MuiAlert } from './component-overrides/alert';\nimport { getPaletteOptions } from './palette/palette-options';\nimport { typography } from './typography';\n\nconst getModalBackgroundStyle = ({ theme }: { theme: Omit<Theme, 'components'> }) => {\n const backgroundStyle =\n theme.palette.mode === 'light'\n ? {}\n : {\n backgroundImage: 'unset',\n backgroundColor: theme.palette.designSystem.grey[800],\n };\n return {\n ...backgroundStyle,\n };\n};\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n * - Base colors, typography, sizing - go/chrono-ui-theme\n * - Material UI defaults: https://material-ui.com/customization/default-theme/\n * - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n * - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n */\nexport function getTheme(mode: PaletteMode) {\n const theme = createTheme({\n palette: getPaletteOptions(mode),\n typography,\n mixins: {},\n components,\n });\n return theme;\n}\n\n// Overrides for component default prop values and styles go here\nconst components: ThemeOptions['components'] = {\n MuiAlert,\n MuiFormControl: {\n defaultProps: {\n size: 'small',\n },\n },\n MuiTextField: {\n defaultProps: {\n size: 'small',\n },\n },\n MuiDrawer: {\n styleOverrides: {\n paper: getModalBackgroundStyle,\n },\n },\n MuiDialog: {\n styleOverrides: {\n paper: getModalBackgroundStyle,\n },\n },\n MuiPopover: {\n styleOverrides: {\n paper: getModalBackgroundStyle,\n },\n },\n};\n"],"names":["createTheme","MuiAlert","getPaletteOptions","typography","getModalBackgroundStyle","theme","backgroundStyle","palette","mode","backgroundImage","backgroundColor","designSystem","grey","getTheme","mixins","components","MuiFormControl","defaultProps","size","MuiTextField","MuiDrawer","styleOverrides","paper","MuiDialog","MuiPopover"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,QAA0C,eAAe,CAAC;AAC9E,SAASC,QAAQ,QAAQ,6BAA6B,CAAC;AACvD,SAASC,iBAAiB,QAAQ,2BAA2B,CAAC;AAC9D,SAASC,UAAU,QAAQ,cAAc,CAAC;AAE1C,MAAMC,uBAAuB,GAAG,CAAC,EAAEC,KAAK,CAAA,EAAwC,GAAK;IACnF,MAAMC,eAAe,GACnBD,KAAK,CAACE,OAAO,CAACC,IAAI,KAAK,OAAO,GAC1B,EAAE,GACF;QACEC,eAAe,EAAE,OAAO;QACxBC,eAAe,EAAEL,KAAK,CAACE,OAAO,CAACI,YAAY,CAACC,IAAI,CAAC,GAAG,CAAC;KACtD,AAAC;IACR,OAAO;QACL,GAAGN,eAAe;KACnB,CAAC;AACJ,CAAC,AAAC;AAEF;;;;;;;;;CASC,GACD,OAAO,SAASO,QAAQ,CAACL,IAAiB,EAAE;IAC1C,MAAMH,KAAK,GAAGL,WAAW,CAAC;QACxBO,OAAO,EAAEL,iBAAiB,CAACM,IAAI,CAAC;QAChCL,UAAU;QACVW,MAAM,EAAE,EAAE;QACVC,UAAU;KACX,CAAC,AAAC;IACH,OAAOV,KAAK,CAAC;AACf,CAAC;AAED,iEAAiE;AACjE,MAAMU,UAAU,GAA+B;IAC7Cd,QAAQ;IACRe,cAAc,EAAE;QACdC,YAAY,EAAE;YACZC,IAAI,EAAE,OAAO;SACd;KACF;IACDC,YAAY,EAAE;QACZF,YAAY,EAAE;YACZC,IAAI,EAAE,OAAO;SACd;KACF;IACDE,SAAS,EAAE;QACTC,cAAc,EAAE;YACdC,KAAK,EAAElB,uBAAuB;SAC/B;KACF;IACDmB,SAAS,EAAE;QACTF,cAAc,EAAE;YACdC,KAAK,EAAElB,uBAAuB;SAC/B;KACF;IACDoB,UAAU,EAAE;QACVH,cAAc,EAAE;YACdC,KAAK,EAAElB,uBAAuB;SAC/B;KACF;CACF,AAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@perses-dev/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.0",
|
|
4
4
|
"description": "Common UI components used across Perses features",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/perses/perses/blob/main/README.md",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@codemirror/lang-json": "^6.0.1",
|
|
37
37
|
"@fontsource/lato": "^4.5.10",
|
|
38
38
|
"@mui/x-date-pickers": "^5.0.0-beta.1",
|
|
39
|
-
"@perses-dev/core": "0.
|
|
39
|
+
"@perses-dev/core": "0.25.0",
|
|
40
40
|
"@uiw/react-codemirror": "^4.19.1",
|
|
41
41
|
"date-fns": "^2.28.0",
|
|
42
42
|
"date-fns-tz": "^1.3.7",
|
|
@@ -47,6 +47,9 @@
|
|
|
47
47
|
"react-colorful": "^5.6.1",
|
|
48
48
|
"react-error-boundary": "^3.1.4"
|
|
49
49
|
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@perses-dev/storybook": "0.25.0"
|
|
52
|
+
},
|
|
50
53
|
"peerDependencies": {
|
|
51
54
|
"@mui/material": "^5.10.0",
|
|
52
55
|
"react": "^17.0.2 || ^18.0.0",
|
package/dist/EChart.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../src/EChart.tsx"],"names":[],"mappings":"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"}
|
package/dist/EChart.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/EChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport { isEqual, debounce } from 'lodash-es';\nimport { EChartsTheme } from './model';\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n componentType: string;\n seriesType: string;\n seriesIndex: number;\n seriesName: string;\n name: string;\n dataIndex: number;\n data: Record<string, unknown> & T;\n dataType: string;\n value: number | number[];\n color: string;\n info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n params: MouseEventsParameters<T>,\n // This is potentially undefined for testing purposes\n instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n 'click',\n 'dblclick',\n 'mousedown',\n 'mousemove',\n 'mouseup',\n 'mouseover',\n 'mouseout',\n 'globalout',\n 'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n dataZoomId: string;\n // start and end not returned unless dataZoom is based on percentProp,\n // which is for cases when a dataZoom component controls multiple axes\n start?: number;\n end?: number;\n // startValue and endValue return data index for 'category' axes,\n // for axis types 'value' and 'time', actual values are returned\n startValue?: number;\n endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n dataIndex: number;\n dataIndexInside: number;\n seriesIndex: number;\n // highlight action can effect multiple connected charts\n escapeConnect?: boolean;\n // whether blur state was triggered\n notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n type: BatchEventName;\n batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n option: EChartsCoreOption;\n theme?: string | EChartsTheme;\n renderer?: 'canvas' | 'svg';\n sx?: SxProps<Theme>;\n onEvents?: OnEventsType<T>;\n _instance?: React.MutableRefObject<ECharts | undefined>;\n onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n option,\n theme,\n renderer,\n sx,\n onEvents,\n _instance,\n onChartInitialized,\n}: EChartsProps<T>) {\n const initialOption = useRef<EChartsCoreOption>(option);\n const prevOption = useRef<EChartsCoreOption>(option);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const chartElement = useRef<ECharts | null>(null);\n\n // Initialize chart, dispose on unmount\n useLayoutEffect(() => {\n if (containerRef.current === null || chartElement.current !== null) return;\n chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n if (chartElement.current === undefined) return;\n chartElement.current.setOption(initialOption.current, true);\n onChartInitialized?.(chartElement.current);\n if (_instance !== undefined) {\n _instance.current = chartElement.current;\n }\n return () => {\n if (chartElement.current === null) return;\n chartElement.current.dispose();\n chartElement.current = null;\n };\n }, [_instance, onChartInitialized, theme, renderer]);\n\n // Update chart data when option changes\n useEffect(() => {\n if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n if (!chartElement.current) return;\n chartElement.current.setOption(option, true);\n prevOption.current = option;\n }, [option]);\n\n // Resize chart, cleanup listener on unmount\n useLayoutEffect(() => {\n const updateSize = debounce(() => {\n if (!chartElement.current) return;\n chartElement.current.resize();\n }, 200);\n window.addEventListener('resize', updateSize);\n updateSize();\n return () => {\n window.removeEventListener('resize', updateSize);\n };\n }, []);\n\n // Bind and unbind chart events passed as prop\n useEffect(() => {\n const chart = chartElement.current;\n if (!chart || onEvents === undefined) return;\n bindEvents(chart, onEvents);\n return () => {\n if (chart === undefined) return;\n if (chart.isDisposed() === true) return;\n for (const event in onEvents) {\n chart.off(event);\n }\n };\n }, [onEvents]);\n\n useEffect(() => {\n const updateSize = debounce(() => {\n if (!chartElement.current) return;\n chartElement.current.resize();\n }, 200);\n updateSize();\n }, [sx]);\n\n return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n if (events === undefined) return;\n\n function bindEvent(eventName: EventName, OnEventFunction: unknown) {\n if (typeof OnEventFunction === 'function') {\n if (isMouseEvent(eventName)) {\n instance.on(eventName, (params) => OnEventFunction(params, instance));\n } else if (isBatchEvent(eventName)) {\n instance.on(eventName, (params) => OnEventFunction(params));\n } else {\n instance.on(eventName, () => OnEventFunction(null, instance));\n }\n }\n }\n\n for (const eventName in events) {\n if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n const customEvent = events[eventName as EventName] ?? null;\n if (customEvent) {\n bindEvent(eventName as EventName, customEvent);\n }\n }\n }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["React","useEffect","useLayoutEffect","useRef","init","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}
|
|
File without changes
|
|
File without changes
|