IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-28 11:44:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Fix a11y issue with show all series button in Graph (#58943)

Browse Source 
* Explore: Fix a11y issue with show all series button in Graph

* remove extra space

* add spacing
This commit is contained in:
Giordano Ricci 2022-11-18 14:52:54 +01:00 committed by GitHub
parent b3406a8273
commit 44e8fb628e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/features/explore/Graph/ExploreGraph.tsx
View File

@ -22,6 +22,7 @@ import {
import { PanelRenderer } from '@grafana/runtime';
import { GraphDrawStyle, LegendDisplayMode, TooltipDisplayMode, SortOrder } from '@grafana/schema';
import {
Button,
Icon,
PanelContext,
PanelContextProvider,
@ -166,13 +167,15 @@ export function ExploreGraph({
{dataWithConfig.length > MAX_NUMBER_OF_TIME_SERIES && !showAllTimeSeries && (
<div className={cx([style.timeSeriesDisclaimer])}>
<Icon className={style.disclaimerIcon} name="exclamation-triangle" />
{`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `}
<span
className={cx([style.showAllTimeSeries])}
onClick={() => {
setShowAllTimeSeries(true);
}}
>{`Show all ${dataWithConfig.length}`}</span>
Showing only {MAX_NUMBER_OF_TIME_SERIES} time series.
<Button
variant="primary"
fill="text"
onClick={() => setShowAllTimeSeries(true)}
className={style.showAllButton}
>
Show all {dataWithConfig.length}
</Button>
</div>
)}
<PanelRenderer
@ -192,7 +195,6 @@ export function ExploreGraph({
const getStyles = (theme: GrafanaTheme2) => ({
timeSeriesDisclaimer: css`
label: time-series-disclaimer;
width: 300px;
margin: ${theme.spacing(1)} auto;
padding: 10px 0;
border-radius: ${theme.spacing(2)};
@ -204,9 +206,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
color: ${theme.colors.warning.main};
margin-right: ${theme.spacing(0.5)};
`,
showAllTimeSeries: css`
label: show-all-time-series;
cursor: pointer;
color: ${theme.colors.text.link};
showAllButton: css`
margin-left: ${theme.spacing(0.5)};
`,
});