fix: add more significant digits to y axis

awslabs · Jan 30, 2024 · 2db2cb1 · 2db2cb1
1 parent 0cfb53a
commit 2db2cb1
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 18 deletions.
diff --git a/...app-kit-visualizations/cypress/integration/charts/bar-chart/draggable-annotations.spec.ts b/...app-kit-visualizations/cypress/integration/charts/bar-chart/draggable-annotations.spec.ts
@@ -71,10 +71,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', () => {
@@ -91,10 +91,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/...pp-kit-visualizations/cypress/integration/charts/line-chart/draggable-annotations.spec.ts b/...pp-kit-visualizations/cypress/integration/charts/line-chart/draggable-annotations.spec.ts
@@ -221,10 +221,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', () => {
@@ -241,10 +241,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/...kit-visualizations/cypress/integration/charts/scatter-chart/draggable-annotations.spec.ts b/...kit-visualizations/cypress/integration/charts/scatter-chart/draggable-annotations.spec.ts
@@ -105,10 +105,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', () => {
@@ -125,10 +125,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/iot-app-kit-visualizations/cypress/support/commands.js b/packages/iot-app-kit-visualizations/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/iot-app-kit-visualizations/src/components/charts/sc-webgl-base-chart/renderAxis.ts b/packages/iot-app-kit-visualizations/src/components/charts/sc-webgl-base-chart/renderAxis.ts
@@ -70,9 +70,10 @@ const yAxisConstructor = (size: SizeConfig, viewport: ViewPort) => {
   const { yTickCount } = tickCount(size);
   const { yScale } = scales(size, viewport);
 
+  // format: https://d3js.org/d3-format#locale_format
   return axisLeft(yScale)
     .ticks(yTickCount)
-    .tickFormat(format('.2s'))
+    .tickFormat(format('.4~s'))
     .tickSize(-size.width)
     .tickPadding(TICK_PADDING);
 };

diff --git a/...t-app-kit-visualizations/src/components/charts/sc-webgl-base-chart/sc-webgl-axis.spec.tsx b/...t-app-kit-visualizations/src/components/charts/sc-webgl-base-chart/sc-webgl-axis.spec.tsx
@@ -128,7 +128,8 @@ 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');
   });
@@ -248,9 +249,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 () => {