Merge pull request #631 from adobe/axisThumbnail

feat: change thumbnail icon to a constant

Author: marshallpete

packages/constants/constants.ts

@@ -50,6 +50,7 @@ export const DEFAULT_INTERACTION_MODE = 'nearest';
 // axis constants
 export const MAX_THUMBNAIL_SIZE = 42;
 export const MIN_THUMBNAIL_SIZE = 16;
+export const THUMBNAIL_OFFSET = 4;
 
 // legend constants
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 250;

packages/vega-spec-builder/src/axis/axisThumbnailUtils.test.ts

@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { MAX_THUMBNAIL_SIZE, MIN_THUMBNAIL_SIZE } from '@spectrum-charts/constants';
+import { MAX_THUMBNAIL_SIZE, MIN_THUMBNAIL_SIZE, THUMBNAIL_OFFSET } from '@spectrum-charts/constants';
 import { ScaleType, Signal } from 'vega';
 import { AxisSpecOptions, AxisThumbnailOptions } from '../types';
 import { defaultAxisOptions } from './axisTestUtils';
@@ -206,7 +206,7 @@ describe('axisThumbnailUtils', () => {
       const result = getAxisThumbnailPosition('xScale', 'category', 'left', 'testThumbnail');
 
       expect(result).toEqual({
-        x: { signal: '-4 - testThumbnailThumbnailSize' },
+        x: { signal: `-${THUMBNAIL_OFFSET} - testThumbnailThumbnailSize` },
         yc: { signal: 'scale(\'xScale\', datum.category) + bandwidth(\'xScale\') / 2' },
       });
     });
@@ -215,7 +215,7 @@ describe('axisThumbnailUtils', () => {
       const result = getAxisThumbnailPosition('yScale', 'value', 'right', 'testThumbnail');
 
       expect(result).toEqual({
-        x: { signal: 'width + 4' },
+        x: { signal: `width + ${THUMBNAIL_OFFSET}` },
         yc: { signal: 'scale(\'yScale\', datum.value) + bandwidth(\'yScale\') / 2' },
       });
     });
@@ -225,7 +225,7 @@ describe('axisThumbnailUtils', () => {
 
       expect(result).toEqual({
         xc: { signal: 'scale(\'xScale\', datum.category) + bandwidth(\'xScale\') / 2' },
-        y: { signal: '-4 - testThumbnailThumbnailSize' },
+        y: { signal: `-${THUMBNAIL_OFFSET} - testThumbnailThumbnailSize` },
       });
     });
 
@@ -234,7 +234,7 @@ describe('axisThumbnailUtils', () => {
 
       expect(result).toEqual({
         xc: { signal: 'scale(\'xScale\', datum.category) + bandwidth(\'xScale\') / 2' },
-        y: { signal: 'height + 4' },
+        y: { signal: `height + ${THUMBNAIL_OFFSET}` },
       });
     });
   });

packages/vega-spec-builder/src/axis/axisThumbnailUtils.ts

@@ -11,7 +11,7 @@
  */
 import { ImageMark, ScaleType, Signal, TextEncodeEntry } from 'vega';
 
-import { FILTERED_TABLE, MAX_THUMBNAIL_SIZE, MIN_THUMBNAIL_SIZE } from '@spectrum-charts/constants';
+import { FILTERED_TABLE, MAX_THUMBNAIL_SIZE, MIN_THUMBNAIL_SIZE, THUMBNAIL_OFFSET } from '@spectrum-charts/constants';
 
 import { getGenericUpdateSignal } from '../signal/signalSpecBuilder';
 import { AxisSpecOptions, AxisThumbnailOptions, AxisThumbnailSpecOptions, Position } from '../types';
@@ -149,24 +149,24 @@ export const getAxisThumbnailPosition = (
   switch (position) {
     case 'left':
       return {
-        x: { signal: `-4 - ${axisThumbnailName}ThumbnailSize` },
+        x: { signal: `-${THUMBNAIL_OFFSET} - ${axisThumbnailName}ThumbnailSize` },
         yc: centerEncoding,
       };
     case 'right':
       return {
-        x: { signal: 'width + 4' },
+        x: { signal: `width + ${THUMBNAIL_OFFSET}` },
         yc: centerEncoding,
       };
     case 'top':
       return {
         xc: centerEncoding,
-        y: { signal: `-4 - ${axisThumbnailName}ThumbnailSize` },
+        y: { signal: `-${THUMBNAIL_OFFSET} - ${axisThumbnailName}ThumbnailSize` },
       };
     case 'bottom':
     default:
       return {
         xc: centerEncoding,
-        y: { signal: 'height + 4' },
+        y: { signal: `height + ${THUMBNAIL_OFFSET}` },
       };
   }
 };