fix: add more significant digits to y-axis

awslabs · Feb 6, 2024 · 77fc683 · 77fc683
1 parent 88eaa85
commit 77fc683
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 19 deletions.
diff --git a/packages/synchro-charts/cypress/integration/charts/bar-chart/draggable-annotations.spec.ts b/packages/synchro-charts/cypress/integration/charts/bar-chart/draggable-annotations.spec.ts
@@ -70,10 +70,10 @@ it('draggable annotation rescales axis in positive direction', () => {
   cy.get('g.axis.y-axis > g.tick').should('have.length', 17);
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(16)
-    .should('have.text', '8.0k');
+    .should('have.text', '8k');
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(0)
-    .should('have.text', '0.0');
+    .should('have.text', '0');
 });
 
 it('draggable annotation rescales axis in negative direction', () => {
@@ -90,10 +90,10 @@ it('draggable annotation rescales axis in negative direction', () => {
   cy.get('g.axis.y-axis > g.tick').should('have.length', 9);
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(8)
-    .should('have.text', '3.0k');
+    .should('have.text', '3k');
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(0)
-    .should('have.text', '−5.0k');
+    .should('have.text', '−5k');
 });
 
 it('non-Editable annotation is not draggable', () => {

diff --git a/packages/synchro-charts/cypress/integration/charts/line-chart/draggable-annotations.spec.ts b/packages/synchro-charts/cypress/integration/charts/line-chart/draggable-annotations.spec.ts
@@ -220,10 +220,10 @@ it('draggable annotation rescales axis in positive direction', () => {
   cy.get('g.axis.y-axis > g.tick').should('have.length', 17);
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(16)
-    .should('have.text', '9.0k');
+    .should('have.text', '9k');
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(0)
-    .should('have.text', '1.0k');
+    .should('have.text', '1k');
 });
 
 it('draggable annotation rescales axis in negative direction', () => {
@@ -240,10 +240,10 @@ it('draggable annotation rescales axis in negative direction', () => {
   cy.get('g.axis.y-axis > g.tick').should('have.length', 10);
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(9)
-    .should('have.text', '5.0k');
+    .should('have.text', '5k');
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(0)
-    .should('have.text', '−4.0k');
+    .should('have.text', '−4k');
 });
 
 it('non-Editable annotation is not draggable', () => {

diff --git a/...ges/synchro-charts/cypress/integration/charts/scatter-chart/draggable-annotations.spec.ts b/...ges/synchro-charts/cypress/integration/charts/scatter-chart/draggable-annotations.spec.ts
@@ -104,10 +104,10 @@ it('draggable annotation rescales axis in positive direction', () => {
   cy.get('g.axis.y-axis > g.tick').should('have.length', 17);
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(16)
-    .should('have.text', '9.0k');
+    .should('have.text', '9k');
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(0)
-    .should('have.text', '1.0k');
+    .should('have.text', '1k');
 });
 
 it('draggable annotation rescales axis in negative direction', () => {
@@ -124,10 +124,10 @@ it('draggable annotation rescales axis in negative direction', () => {
   cy.get('g.axis.y-axis > g.tick').should('have.length', 10);
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(9)
-    .should('have.text', '5.0k');
+    .should('have.text', '5k');
   cy.get('g.axis.y-axis > g.tick > text')
     .eq(0)
-    .should('have.text', '−4.0k');
+    .should('have.text', '−4k');
 });
 
 it('non-Editable annotation is not draggable', () => {

diff --git a/...to a viewport way outside the points and back to the original viewport.snap.png b/...to a viewport way outside the points and back to the original viewport.snap.png
diff --git a/...roperly without snapping back even if outdated annotation is passed in.snap.png b/...roperly without snapping back even if outdated annotation is passed in.snap.png
diff --git a/...coloration with one less than threshold and one greater than threshold.snap.png b/...coloration with one less than threshold and one greater than threshold.snap.png
diff --git a/packages/synchro-charts/cypress/support/commands.js b/packages/synchro-charts/cypress/support/commands.js
@@ -30,7 +30,7 @@ import { addChartCommands } from './chartCommands';
 addChartCommands();
 
 addMatchImageSnapshotCommand({
-  failureThresholdType: 'pixel',
-  failureThreshold: 2,
+  failureThresholdType: 'percent',
+  failureThreshold: 0.01,
   customDiffConfig: { threshold: 0.2 },
 });
diff --git a/packages/synchro-charts/src/components/charts/sc-webgl-base-chart/renderAxis.ts b/packages/synchro-charts/src/components/charts/sc-webgl-base-chart/renderAxis.ts
@@ -72,7 +72,7 @@ const yAxisConstructor = (size: SizeConfig, viewport: ViewPort) => {
 
   return axisLeft(yScale)
     .ticks(yTickCount)
-    .tickFormat(format('.2s'))
+    .tickFormat(format('.4~s'))
     .tickSize(-size.width)
     .tickPadding(TICK_PADDING);
 };

diff --git a/packages/synchro-charts/src/components/charts/sc-webgl-base-chart/sc-webgl-axis.spec.tsx b/packages/synchro-charts/src/components/charts/sc-webgl-base-chart/sc-webgl-axis.spec.tsx
@@ -126,9 +126,9 @@ describe('initial render', () => {
 
   it('has expected y axis value labels', async () => {
     const { axis } = await axisSpecPage();
-    expect(axis.innerHTML).toContain('3.0k');
+    expect(axis.innerHTML).toContain('3k');
+    expect(axis.innerHTML).toContain('3.05k');
     expect(axis.innerHTML).toContain('3.1k');
-    expect(axis.innerHTML).not.toContain('3.00k');
   });
 
   it('renders the y-axis label', async () => {
@@ -246,9 +246,9 @@ describe('updated correctly', () => {
     expect(axis.innerHTML).not.toContain('3.10k');
 
     // Does contain new y labels
-    expect(axis.innerHTML).toContain('4.0k');
+    expect(axis.innerHTML).toContain('4k');
     expect(axis.innerHTML).toContain('4.5k');
-    expect(axis.innerHTML).toContain('5.0k');
+    expect(axis.innerHTML).toContain('5k');
   });
 
   it('updates the y-axis label', async () => {