Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
vmui: tips for working with the graph and legend (#4045)
* feat: add tips for working with the graph and legend * feat: add the ability to collapse the legend * vmui/docs: add the ability to collapse the legend --------- Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>
- Loading branch information
Showing
9 changed files
with
237 additions
and
26 deletions.
There are no files selected for viewing
53 changes: 53 additions & 0 deletions
53
app/vmui/packages/vmui/src/components/Chart/GraphTips/GraphTips.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React, { FC } from "preact/compat"; | ||
| import "./style.scss"; | ||
| import Button from "../../Main/Button/Button"; | ||
| import { TipIcon } from "../../Main/Icons"; | ||
| import Tooltip from "../../Main/Tooltip/Tooltip"; | ||
| import Modal from "../../Main/Modal/Modal"; | ||
| import useBoolean from "../../../hooks/useBoolean"; | ||
| import tips from "./contants/tips"; | ||
|
|
||
| const GraphTips: FC = () => { | ||
| const { | ||
| value: showTips, | ||
| setFalse: handleCloseTips, | ||
| setTrue: handleOpenTips | ||
| } = useBoolean(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <Tooltip title={"Show tips on working with the graph"}> | ||
| <Button | ||
| variant="text" | ||
| color={"gray"} | ||
| startIcon={<TipIcon/>} | ||
| onClick={handleOpenTips} | ||
| /> | ||
| </Tooltip> | ||
| {showTips && ( | ||
| <Modal | ||
| title={"Tips on working with the graph and the legend"} | ||
| onClose={handleCloseTips} | ||
| > | ||
| <div className="fc-graph-tips"> | ||
| {tips.map(({ title, description }) => ( | ||
| <div | ||
| className="fc-graph-tips-item" | ||
| key={title} | ||
| > | ||
| <h4 className="fc-graph-tips-item__action"> | ||
| {title} | ||
| </h4> | ||
| <p className="fc-graph-tips-item__description"> | ||
| {description} | ||
| </p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </Modal> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default GraphTips; |
67 changes: 67 additions & 0 deletions
67
app/vmui/packages/vmui/src/components/Chart/GraphTips/contants/tips.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React from "react"; | ||
| import { isMacOs } from "../../../../utils/detect-device"; | ||
| import { DragIcon, SettingsIcon } from "../../../Main/Icons"; | ||
|
|
||
| const metaKey = <code>{isMacOs() ? "Cmd" : "Ctrl"}</code>; | ||
|
|
||
| const graphTips = [ | ||
| { | ||
| title: "Zoom in", | ||
| description: <> | ||
| To zoom in, hold down the {metaKey} + <code>scroll up</code>, or press the <code>+</code>. | ||
| Also, you can zoom in on a range on the graph by holding down your mouse button and selecting the range. | ||
| </>, | ||
| }, | ||
| { | ||
| title: "Zoom out", | ||
| description: <> | ||
| To zoom out, hold down the {metaKey} + <code>scroll down</code>, or press the <code>-</code>. | ||
| </>, | ||
| }, | ||
| { | ||
| title: "Move horizontal axis", | ||
| description: <> | ||
| To move the graph, hold down the {metaKey} + <code>drag</code> the graph to the right or left. | ||
| </>, | ||
| }, | ||
| { | ||
| title: "Fixing a tooltip", | ||
| description: <> | ||
| To fix the tooltip, <code>click</code> mouse when it's open. | ||
| Then, you can drag the fixed tooltip by <code>clicking</code> and <code>dragging</code> on the <DragIcon/> icon. | ||
| </> | ||
| }, | ||
| { | ||
| title: "Set a custom range for the vertical axis", | ||
| description: <> | ||
| To set a custom range for the vertical axis, | ||
| click on the <SettingsIcon/> icon located in the upper right corner of the graph, | ||
| activate the toggle, and set the values. | ||
| </> | ||
| }, | ||
| ]; | ||
|
|
||
| const legendTips = [ | ||
| { | ||
| title: "Show/hide a legend item", | ||
| description: <> | ||
| <code>click</code> on a legend item to isolate it on the graph. | ||
| {metaKey} + <code>click</code> on a legend item to remove it from the graph. | ||
| To revert to the previous state, click again. | ||
| </> | ||
| }, | ||
| { | ||
| title: "Copy key-value pairs", | ||
| description: <> | ||
| <code>click</code> on a key-value pair to save it to the clipboard. | ||
| </> | ||
| }, | ||
| { | ||
| title: "Collapse/Expand the legend group", | ||
| description: <> | ||
| <code>click</code> on the group name (e.g. <b>Query 1: {name!=""}</b>) to collapse or expand the legend. | ||
| </> | ||
| }, | ||
| ]; | ||
|
|
||
| export default graphTips.concat(legendTips); |
49 changes: 49 additions & 0 deletions
49
app/vmui/packages/vmui/src/components/Chart/GraphTips/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| @use "src/styles/variables" as *; | ||
|
|
||
| .fc-graph-tips { | ||
| max-width: 520px; | ||
| display: grid; | ||
| gap: $padding-global; | ||
|
|
||
| &-item { | ||
| display: grid; | ||
| gap: $padding-small; | ||
| line-height: 1.3; | ||
| padding-bottom: $padding-global; | ||
| border-bottom: $border-divider; | ||
|
|
||
| &__action { | ||
| color: $color-text-secondary; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| &__description { | ||
| display: inline-block; | ||
| line-height: 20px; | ||
|
|
||
| svg, | ||
| code { | ||
| min-height: 20px; | ||
| min-width: 20px; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 0 4px; | ||
| font-size: $font-size-small; | ||
| color: $color-text; | ||
| background-color: $color-background-body; | ||
| border: $border-divider; | ||
| border-radius: $border-radius-small; | ||
| margin: 0 2px 2px; | ||
| } | ||
| } | ||
|
|
||
| svg { | ||
| width: 18px; | ||
| color: $color-primary; | ||
| padding: 2px; | ||
| margin-top: -8px; | ||
| transform: translateY(8px); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { useCallback, useState } from "preact/compat"; | ||
| import { Dispatch, SetStateAction } from "react"; | ||
|
|
||
| interface UseBooleanOutput { | ||
| value: boolean | ||
| setValue: Dispatch<SetStateAction<boolean>> | ||
| setTrue: () => void | ||
| setFalse: () => void | ||
| toggle: () => void | ||
| } | ||
|
|
||
| const useBoolean = (defaultValue?: boolean): UseBooleanOutput => { | ||
| const [value, setValue] = useState(!!defaultValue); | ||
|
|
||
| const setTrue = useCallback(() => setValue(true), []); | ||
| const setFalse = useCallback(() => setValue(false), []); | ||
| const toggle = useCallback(() => setValue(x => !x), []); | ||
|
|
||
| return { value, setValue, setTrue, setFalse, toggle }; | ||
| }; | ||
|
|
||
| export default useBoolean; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters