Skip to content

Commit a9c4366

Browse files
ruanylopensearch-changeset-bot[bot]
ruanyl
and
opensearch-changeset-bot[bot]
authored
[Explore] Metric viz with sparkline (opensearch-project#10449)
* Add sparkline to metric viz Signed-off-by: Yulong Ruan <ruanyl@amazon.com> * add unit tests for metric viz Signed-off-by: Yulong Ruan <ruanyl@amazon.com> * Changeset file for PR opensearch-project#10449 created/updated * fix cypress tests Signed-off-by: Yulong Ruan <ruanyl@amazon.com> * fix cypress Signed-off-by: Yulong Ruan <ruanyl@amazon.com> --------- Signed-off-by: Yulong Ruan <ruanyl@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
1 parent 1ceb80b commit a9c4366

22 files changed

Lines changed: 764 additions & 121 deletions

File tree

‎changelogs/fragments/10449.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
feat:
2+
- Update metric viz to support sparkline ([#10449](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10449))

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/add_vis_to_dashboard.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const createMetricVisualization = () => {
3131
cy.getElementByTestId('exploreVisStylePanel')
3232
.should('be.visible')
3333
.within(() => {
34-
cy.get('button[class*="euiSuperSelect"]').should('be.visible').click();
34+
cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
3535
});
3636
cy.get('[role="option"][aria-selected="true"]')
3737
.should('be.visible')

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis.spec.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const runCreateVisTests = () => {
6666
.should('be.visible')
6767
.within(() => {
6868
// Try finding the EuiSuperSelect button directly
69-
cy.get('button[class*="euiSuperSelect"]').should('be.visible').click();
69+
cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
7070
});
7171
cy.get('[role="option"][aria-selected="true"]')
7272
.should('be.visible')
@@ -107,7 +107,7 @@ export const runCreateVisTests = () => {
107107
.should('be.visible')
108108
.within(() => {
109109
// Try finding the EuiSuperSelect button directly
110-
cy.get('button[class*="euiSuperSelect"]').should('be.visible').click();
110+
cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
111111
});
112112
cy.get('[role="option"][aria-selected="true"]')
113113
.should('be.visible')
@@ -149,7 +149,7 @@ export const runCreateVisTests = () => {
149149
.should('be.visible')
150150
.within(() => {
151151
// Try finding the EuiSuperSelect button directly
152-
cy.get('button[class*="euiSuperSelect"]').should('be.visible').click();
152+
cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
153153
});
154154
cy.get('[role="option"][aria-selected="true"]')
155155
.should('be.visible')
@@ -181,7 +181,7 @@ export const runCreateVisTests = () => {
181181
// Run the query
182182
cy.getElementByTestId('exploreQueryExecutionButton').click();
183183
cy.osd.waitForLoader(true);
184-
cy.get('button[class*="euiSuperSelect"]').should('be.visible').click();
184+
cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
185185

186186
cy.get('[role="option"][aria-selected="true"]')
187187
.should('be.visible')
@@ -223,7 +223,7 @@ export const runCreateVisTests = () => {
223223
.should('be.visible')
224224
.within(() => {
225225
// Try finding the EuiSuperSelect button directly
226-
cy.get('button[class*="euiSuperSelect"]').should('be.visible').click();
226+
cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
227227
});
228228
cy.get('[role="option"][aria-selected="true"]')
229229
.should('be.visible')
@@ -337,7 +337,7 @@ export const runCreateVisTests = () => {
337337
.should('be.visible')
338338
.within(() => {
339339
// Try finding the EuiSuperSelect button directly
340-
cy.get('button[class*="euiSuperSelect"]').should('be.visible').click();
340+
cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
341341
});
342342
cy.get('[role="option"][aria-selected="true"]')
343343
.should('be.visible')

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_metric.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const runCreateVisTests = () => {
3939
cy.explore.createVisualizationWithQuery(query, 'Metric', datasetName);
4040
});
4141

42-
it('should change style options and the changes reflect immediatly to the metric visualization', () => {
42+
it('should change style options and the changes reflect immediately to the metric visualization', () => {
4343
const query = `source=${datasetName} | stats count()`;
4444
cy.explore.createVisualizationWithQuery(query, 'Metric', datasetName);
4545
let beforeCanvasDataUrl;

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/vis_type_switch.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const runVisTypeSwitchTests = () => {
4545
cy.getElementByTestId('exploreVisStylePanel')
4646
.should('be.visible')
4747
.within(() => {
48-
cy.get('button[class*="euiSuperSelect"]').should('be.visible').click();
48+
cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
4949
});
5050
cy.get('[role="option"][aria-selected="true"]')
5151
.should('be.visible')

‎cypress/utils/commands.explore.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -505,7 +505,7 @@ cy.explore.add('createVisualizationWithQuery', (query, chartType, datasetName) =
505505
cy.getElementByTestId('exploreVisStylePanel')
506506
.should('be.visible')
507507
.within(() => {
508-
cy.get('button[class*="euiSuperSelect"]').should('be.visible').click();
508+
cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
509509
});
510510

511511
// for pie and area, it needs manual chart type switch
@@ -519,7 +519,7 @@ cy.explore.add('createVisualizationWithQuery', (query, chartType, datasetName) =
519519
cy.getElementByTestId('exploreVisStylePanel')
520520
.should('be.visible')
521521
.within(() => {
522-
cy.get('button[class*="euiSuperSelect"]').should('be.visible').click();
522+
cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
523523
});
524524
}
525525

‎src/plugins/explore/public/components/query_panel/query_panel_widgets/language_reference/language_reference.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export const LanguageReference = () => {
5959
}
6060
>
6161
<EuiButtonIcon
62+
aria-label="language reference"
6263
size="xs"
6364
className={classNames('exploreLanguageReference', {
6465
['exploreLanguageReference--disabled']: !languageIsHandled,

‎src/plugins/explore/public/components/visualizations/metric/metric_vis_config.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ describe('createMetrictmapeConfig', () => {
3131
// Verify basic controls
3232
expect(defaults.showTitle).toBe(true);
3333
expect(defaults.title).toBe('');
34-
expect(defaults.fontSize).toBe(60);
34+
expect(defaults.fontSize).toBe(undefined);
3535
expect(defaults.useColor).toBe(false);
3636
expect(defaults.colorSchema).toBe(ColorSchemas.BLUES);
3737
});

‎src/plugins/explore/public/components/visualizations/metric/metric_vis_config.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,25 @@ import { VisualizationType } from '../utils/use_visualization_types';
88
import { MetricVisStyleControls } from './metric_vis_options';
99
import { RangeValue, ColorSchemas, AxisRole, VisFieldType } from '../types';
1010

11+
export type TextAlignment = 'auto' | 'center';
12+
1113
export interface MetricChartStyleControls {
1214
showTitle: boolean;
1315
title: string;
14-
fontSize: number;
16+
fontSize?: number;
17+
titleSize?: number;
1518
useColor: boolean;
1619
colorSchema: ColorSchemas;
20+
valueCalculation: string;
1721
customRanges?: RangeValue[];
1822
}
1923

2024
export const defaultMetricChartStyles: MetricChartStyleControls = {
2125
showTitle: true,
2226
title: '',
23-
fontSize: 60,
2427
useColor: false,
2528
colorSchema: ColorSchemas.BLUES,
29+
valueCalculation: 'last',
2630
// add default range for metric
2731
customRanges: [{ min: 0, max: 100 }],
2832
};
@@ -39,6 +43,10 @@ export const createMetricConfig = (): VisualizationType<'metric'> => ({
3943
{
4044
[AxisRole.Value]: { type: VisFieldType.Numerical, index: 0 },
4145
},
46+
{
47+
[AxisRole.Value]: { type: VisFieldType.Numerical, index: 0 },
48+
[AxisRole.Time]: { type: VisFieldType.Date, index: 0 },
49+
},
4250
],
4351
},
4452
});

‎src/plugins/explore/public/components/visualizations/metric/metric_vis_options.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ describe('MetricVisStyleControls', () => {
8989
it('renders font size range slider', () => {
9090
render(<MetricVisStyleControls {...mockProps} />);
9191

92-
expect(screen.getByRole('slider', { name: 'Font size' })).toBeInTheDocument();
92+
expect(screen.getByTestId('valueFontSizeInput')).toBeInTheDocument();
9393
});
9494

9595
it('renders use color switch', () => {
@@ -143,7 +143,7 @@ describe('MetricVisStyleControls', () => {
143143

144144
it('calls onStyleChange when font size is changed', async () => {
145145
render(<MetricVisStyleControls {...mockProps} />);
146-
const fontSizeSlider = screen.getByRole('slider', { name: 'Font size' });
146+
const fontSizeSlider = screen.getByTestId('valueFontSizeInput');
147147
fireEvent.change(fontSizeSlider, { target: { value: '80' } });
148148

149149
await waitFor(() => {

0 commit comments

Comments
 (0)