Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

adjust explorer chart color and spacing #1051

Merged
merged 3 commits into from
Sep 26, 2023
Merged

adjust explorer chart color and spacing #1051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1997579
color change
paulstn Sep 26, 2023
c822db0
floating islands
paulstn Sep 26, 2023
e71ab30
snapshots
paulstn Sep 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion common/constants/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const SAVED_OBJECT = '/object';
// Color Constants
export const PLOTLY_COLOR = [
'#3CA1C7',
'#8C55A3',
'#54B399',
'#DB748A',
'#F2BE4B',
'#68CCC2',
Expand Down
14 changes: 7 additions & 7 deletions public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1423,7 +1423,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
"barmode": "group",
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -1516,7 +1516,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
"barmode": "group",
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -2057,7 +2057,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -2573,7 +2573,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -3103,7 +3103,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -4768,7 +4768,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
"barmode": "group",
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -4861,7 +4861,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
"barmode": "group",
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down
200 changes: 102 additions & 98 deletions public/components/event_analytics/explorer/explorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
EuiHorizontalRule,
EuiLink,
EuiLoadingSpinner,
EuiPanel,
EuiSpacer,
EuiTabbedContent,
EuiTabbedContentTab,
Expand Down Expand Up @@ -506,108 +507,111 @@ export const Explorer = ({
</div>
<div className={`dscWrapper ${mainSectionClassName}`}>
{explorerData && !isEmpty(explorerData.jsonData) ? (
<div className="dscWrapper__content">
<div className="dscResults">
{countDistribution?.data && !isLiveTailOnRef.current && (
<>
<HitsCounter
hits={_.sum(countDistribution.data['count()'])}
showResetButton={false}
onResetQuery={() => {}}
/>
<TimechartHeader
options={timeIntervalOptions}
onChangeInterval={(selectedIntrv) => {
const intervalOptionsIndex = timeIntervalOptions.findIndex(
(item) => item.value === selectedIntrv
);
const intrv = selectedIntrv.replace(/^auto_/, '');
getCountVisualizations(intrv);
selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex];
getPatterns(intrv, getErrorHandler('Error fetching patterns'));
}}
stateInterval={selectedIntervalRef.current?.value}
startTime={appLogEvents ? startTime : dateRange[0]}
endTime={appLogEvents ? endTime : dateRange[1]}
/>
<CountDistribution
countDistribution={countDistribution}
selectedInterval={selectedIntervalRef.current?.value}
startTime={appLogEvents ? startTime : dateRange[0]}
endTime={appLogEvents ? endTime : dateRange[1]}
/>
<EuiHorizontalRule margin="xs" />
<LogPatterns
selectedIntervalUnit={selectedIntervalRef.current}
handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
/>
</>
)}

<section
className="dscTable dscTableFixedScroll"
aria-labelledby="documentsAriaLabel"
>
<h2 className="euiScreenReaderOnly" id="documentsAriaLabel">
<FormattedMessage id="discover.documentsAriaLabel" defaultMessage="Documents" />
</h2>
<div className="dscDiscover">
{isLiveTailOnRef.current && (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
<EuiPanel paddingSize="s" style={{ height: '100%' }}>
{countDistribution?.data && !isLiveTailOnRef.current && (
<>
<EuiSpacer size="m" />
<EuiFlexGroup justifyContent="center" alignItems="center" gutterSize="m">
<EuiLoadingSpinner size="l" />
<EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
<strong>&nbsp;&nbsp;Live streaming</strong>
</EuiText>
<EuiFlexItem grow={false}>
<HitsCounter
hits={totalHits}
showResetButton={false}
onResetQuery={() => {}}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>since {liveTimestamp}</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
<HitsCounter
hits={_.sum(countDistribution.data['count()'])}
showResetButton={false}
onResetQuery={() => {}}
/>
<TimechartHeader
options={timeIntervalOptions}
onChangeInterval={(selectedIntrv) => {
const intervalOptionsIndex = timeIntervalOptions.findIndex(
(item) => item.value === selectedIntrv
);
const intrv = selectedIntrv.replace(/^auto_/, '');
getCountVisualizations(intrv);
selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex];
getPatterns(intrv, getErrorHandler('Error fetching patterns'));
}}
stateInterval={selectedIntervalRef.current?.value}
startTime={appLogEvents ? startTime : dateRange[0]}
endTime={appLogEvents ? endTime : dateRange[1]}
/>
<CountDistribution
countDistribution={countDistribution}
selectedInterval={selectedIntervalRef.current?.value}
startTime={appLogEvents ? startTime : dateRange[0]}
endTime={appLogEvents ? endTime : dateRange[1]}
/>
</>
)}
{countDistribution?.data && (
<EuiTitle size="s">
<h3 style={{ margin: '0px', textAlign: 'left', marginLeft: '10px' }}>
Events
<span className="event-header-count">
{' '}
(
{reduce(
countDistribution.data['count()'],
(sum, n) => {
return sum + n;
},
0
)}
)
</span>
</h3>
</EuiTitle>
)}
<EuiHorizontalRule margin="xs" />
<DataGrid
http={http}
pplService={pplService}
rows={explorerData.jsonData}
rowsAll={explorerData.jsonDataAll}
explorerFields={explorerFields}
timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
</EuiPanel>
</EuiPanel>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
<EuiPanel paddingSize="s" style={{ height: '100%' }}>
<LogPatterns
selectedIntervalUnit={selectedIntervalRef.current}
handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
/>
<a tabIndex={0} id="discoverBottomMarker">
&#8203;
</a>
</div>
</section>
</div>
</div>
</EuiPanel>
</EuiPanel>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
<EuiPanel paddingSize="s" style={{ height: '100%' }}>
<section
className="dscTable dscTableFixedScroll"
aria-labelledby="documentsAriaLabel"
>
<h2 className="euiScreenReaderOnly" id="documentsAriaLabel">
<FormattedMessage
id="discover.documentsAriaLabel"
defaultMessage="Documents"
/>
</h2>
<div className="dscDiscover">
{isLiveTailOnRef.current && (
<>
<EuiSpacer size="m" />
<EuiFlexGroup
justifyContent="center"
alignItems="center"
gutterSize="m"
>
<EuiLoadingSpinner size="l" />
<EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
<strong>&nbsp;&nbsp;Live streaming</strong>
</EuiText>
<EuiFlexItem grow={false}>
<HitsCounter
hits={totalHits}
showResetButton={false}
onResetQuery={() => {}}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>since {liveTimestamp}</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
</>
)}
<DataGrid
http={http}
pplService={pplService}
rows={explorerData.jsonData}
rowsAll={explorerData.jsonDataAll}
explorerFields={explorerFields}
timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
/>
<a tabIndex={0} id="discoverBottomMarker">
&#8203;
</a>
</div>
</section>
</EuiPanel>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
) : (
<NoResults />
)}
Expand Down
6 changes: 3 additions & 3 deletions ...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1602,7 +1602,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -1835,7 +1835,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -2333,7 +2333,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down
6 changes: 3 additions & 3 deletions public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
layout={
Object {
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"margin": Object {
Expand Down Expand Up @@ -698,7 +698,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
"bargroupgap": 0.030000000000000027,
"barmode": "group",
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"hovermode": "closest",
Expand Down Expand Up @@ -756,7 +756,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
"bargroupgap": 0.030000000000000027,
"barmode": "group",
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"hovermode": "closest",
Expand Down
2 changes: 1 addition & 1 deletion public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`Gauge component Renders gauge component 1`] = `
layout={
Object {
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"margin": Object {
Expand Down
6 changes: 3 additions & 3 deletions public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
layout={
Object {
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"margin": Object {
Expand Down Expand Up @@ -710,7 +710,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
layout={
Object {
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"margin": Object {
Expand Down Expand Up @@ -763,7 +763,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
"autosize": true,
"barmode": "stack",
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"hovermode": "closest",
Expand Down
Loading
Loading