From 24792e6f713d5483269a69eec4e7282b90b897e3 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Tue, 5 Feb 2019 13:06:09 -0800 Subject: [PATCH 1/4] docs(axis labels): add many labels example --- src/stories/axis.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/stories/axis.tsx b/src/stories/axis.tsx index 62c88b3eff..7b238fcfb2 100644 --- a/src/stories/axis.tsx +++ b/src/stories/axis.tsx @@ -15,6 +15,7 @@ import { } from '..'; import { PartialTheme } from '../lib/themes/theme'; import { LineSeries } from '../specs'; +import { DataGenerator } from '../utils/data_generators/data_generator'; function createThemeAction(title: string, min: number, max: number, value: number) { return number(title, value, { @@ -266,4 +267,28 @@ storiesOf('Axis', module) /> ); + }) + .add('w many tick labels', () => { + const dg = new DataGenerator(); + const data = dg.generateSimpleSeries(31); + return ( + + + + + + ); }); From a7b13bc7670fa49852094ada3449e523d8f432d2 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Tue, 5 Feb 2019 13:41:27 -0800 Subject: [PATCH 2/4] fix(axis): fix tick label truncation on chrome fixes #18 --- src/lib/axes/canvas_text_bbox_calculator.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/lib/axes/canvas_text_bbox_calculator.ts b/src/lib/axes/canvas_text_bbox_calculator.ts index ccc45e3bc8..ffa20ed6f7 100644 --- a/src/lib/axes/canvas_text_bbox_calculator.ts +++ b/src/lib/axes/canvas_text_bbox_calculator.ts @@ -5,6 +5,7 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator { private attachedRoot: HTMLElement; private offscreenCanvas: HTMLCanvasElement; private context: CanvasRenderingContext2D | null; + private fontScale: number; // TODO specify styles for text // TODO specify how to hide the svg from the current dom view // like moving it a -9999999px @@ -13,15 +14,21 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator { this.context = this.offscreenCanvas.getContext('2d'); this.attachedRoot = rootElement || document.documentElement; this.attachedRoot.appendChild(this.offscreenCanvas); + this.fontScale = 100; } compute(text: string, fontSize = 16, fontFamily = 'Arial'): Option { if (!this.context) { return none; } - this.context.font = `${fontSize}px ${fontFamily}`; + + // We scale the text up to get a more accurate computation of the width of the text + // because `measureText` can vary a lot between browsers. + const scaledFontSize = fontSize * this.fontScale; + this.context.font = `${scaledFontSize}px ${fontFamily}`; const measure = this.context.measureText(text); + return some({ - width: measure.width, + width: measure.width / this.fontScale, height: fontSize, }); } From e90544e612cee9dad57bafebddc7509d2599d875 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Tue, 5 Feb 2019 16:03:08 -0800 Subject: [PATCH 3/4] style: remove old comments (move into issues) --- src/lib/axes/canvas_text_bbox_calculator.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/lib/axes/canvas_text_bbox_calculator.ts b/src/lib/axes/canvas_text_bbox_calculator.ts index ffa20ed6f7..a74175e6aa 100644 --- a/src/lib/axes/canvas_text_bbox_calculator.ts +++ b/src/lib/axes/canvas_text_bbox_calculator.ts @@ -6,9 +6,7 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator { private offscreenCanvas: HTMLCanvasElement; private context: CanvasRenderingContext2D | null; private fontScale: number; - // TODO specify styles for text - // TODO specify how to hide the svg from the current dom view - // like moving it a -9999999px + constructor(rootElement?: HTMLElement) { this.offscreenCanvas = document.createElement('canvas'); this.context = this.offscreenCanvas.getContext('2d'); From 1f1a05edbaaa01c3fd7d9b606e9e309e862637f9 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Tue, 5 Feb 2019 16:06:56 -0800 Subject: [PATCH 4/4] perf(canvas): reduce scaling factor for text measurement --- src/lib/axes/canvas_text_bbox_calculator.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/axes/canvas_text_bbox_calculator.ts b/src/lib/axes/canvas_text_bbox_calculator.ts index a74175e6aa..ba1f0ee289 100644 --- a/src/lib/axes/canvas_text_bbox_calculator.ts +++ b/src/lib/axes/canvas_text_bbox_calculator.ts @@ -5,14 +5,14 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator { private attachedRoot: HTMLElement; private offscreenCanvas: HTMLCanvasElement; private context: CanvasRenderingContext2D | null; - private fontScale: number; + private scaledFontSize: number; constructor(rootElement?: HTMLElement) { this.offscreenCanvas = document.createElement('canvas'); this.context = this.offscreenCanvas.getContext('2d'); this.attachedRoot = rootElement || document.documentElement; this.attachedRoot.appendChild(this.offscreenCanvas); - this.fontScale = 100; + this.scaledFontSize = 100; } compute(text: string, fontSize = 16, fontFamily = 'Arial'): Option { if (!this.context) { @@ -21,12 +21,12 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator { // We scale the text up to get a more accurate computation of the width of the text // because `measureText` can vary a lot between browsers. - const scaledFontSize = fontSize * this.fontScale; - this.context.font = `${scaledFontSize}px ${fontFamily}`; + const scalingFactor = this.scaledFontSize / fontSize; + this.context.font = `${this.scaledFontSize}px ${fontFamily}`; const measure = this.context.measureText(text); return some({ - width: measure.width / this.fontScale, + width: measure.width / scalingFactor, height: fontSize, }); }