From ed449fb2b1763ea5e7215408b275fdf1566773f9 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 2 Aug 2023 00:59:08 -0700 Subject: [PATCH 1/4] fix(slider): prevent excessive tick rendering --- .../src/components/slider/resources.ts | 2 ++ .../src/components/slider/slider.stories.ts | 15 +++++++++++++++ .../src/components/slider/slider.tsx | 19 ++++++++++++++----- 3 files changed, 31 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/slider/resources.ts b/packages/calcite-components/src/components/slider/resources.ts index 331ff5efc46..6077a2a6d8e 100644 --- a/packages/calcite-components/src/components/slider/resources.ts +++ b/packages/calcite-components/src/components/slider/resources.ts @@ -5,3 +5,5 @@ export const CSS = { tickMin: "tick__label--min", tickMax: "tick__label--max", }; + +export const maxTickElementThreshold = 250; diff --git a/packages/calcite-components/src/components/slider/slider.stories.ts b/packages/calcite-components/src/components/slider/slider.stories.ts index 34ec79ed0a2..9c79647c8f4 100644 --- a/packages/calcite-components/src/components/slider/slider.stories.ts +++ b/packages/calcite-components/src/components/slider/slider.stories.ts @@ -393,3 +393,18 @@ export const WithLargeFontSize_TestOnly = (): string => html` `; + +export const maxTickRendering_TestOnly = (): string => html` + + + + + + + + + + + + +`; diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx index 9df2de70970..e80f56e50b5 100644 --- a/packages/calcite-components/src/components/slider/slider.tsx +++ b/packages/calcite-components/src/components/slider/slider.tsx @@ -29,7 +29,7 @@ import { updateHostInteraction, } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; -import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { componentFocusable, LoadableComponent, @@ -46,7 +46,7 @@ import { import { clamp, decimalPlaces } from "../../utils/math"; import { ColorStop, DataSeries } from "../graph/interfaces"; import { Scale } from "../interfaces"; -import { CSS } from "./resources"; +import { CSS, maxTickElementThreshold } from "./resources"; type ActiveSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue"; type SetValueProperty = Exclude; @@ -1031,13 +1031,22 @@ export class Slider ); } + private getTickRatio(): number { + const totalTicks = (this.max - this.min) / this.ticks; + return totalTicks / maxTickElementThreshold; + } + private generateTickValues(): number[] { const ticks = []; - let current = this.min; - while (this.ticks && current < this.max + this.ticks) { + const ratio = this.getTickRatio(); + const effectiveRatio = ratio < 1 ? 1 : ratio; + let current = this.min * effectiveRatio; + + while (this.ticks > 0 && current < this.max + this.ticks) { ticks.push(Math.min(current, this.max)); - current = current + this.ticks; + current += this.ticks * effectiveRatio; } + return ticks; } From 0279839e0148763faaae80c203449839eb10cb2c Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 2 Aug 2023 10:50:27 -0700 Subject: [PATCH 2/4] fix tests --- .../src/components/slider/slider.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx index e80f56e50b5..7fd16e88242 100644 --- a/packages/calcite-components/src/components/slider/slider.tsx +++ b/packages/calcite-components/src/components/slider/slider.tsx @@ -1037,14 +1037,25 @@ export class Slider } private generateTickValues(): number[] { - const ticks = []; + const tickInterval = this.ticks ?? 0; + + if (tickInterval <= 0) { + return []; + } + + const ticks: number[] = [this.min]; const ratio = this.getTickRatio(); const effectiveRatio = ratio < 1 ? 1 : ratio; - let current = this.min * effectiveRatio; + let current = this.min; + const tickOffset = tickInterval * effectiveRatio; - while (this.ticks > 0 && current < this.max + this.ticks) { + while (current < this.max) { + current += tickOffset; ticks.push(Math.min(current, this.max)); - current += this.ticks * effectiveRatio; + } + + if (!ticks.includes(this.max)) { + ticks.push(this.max); } return ticks; From 0516a9f2332e6fdb8fa384511b3cfed84b29234f Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 2 Aug 2023 11:03:24 -0700 Subject: [PATCH 3/4] tidy up --- .../src/components/slider/slider.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx index 7fd16e88242..7167b4fd5b2 100644 --- a/packages/calcite-components/src/components/slider/slider.tsx +++ b/packages/calcite-components/src/components/slider/slider.tsx @@ -1031,9 +1031,10 @@ export class Slider ); } - private getTickRatio(): number { - const totalTicks = (this.max - this.min) / this.ticks; - return totalTicks / maxTickElementThreshold; + private getTickDensity(): number { + const density = (this.max - this.min) / this.ticks / maxTickElementThreshold; + + return density < 1 ? 1 : density; } private generateTickValues(): number[] { @@ -1044,10 +1045,9 @@ export class Slider } const ticks: number[] = [this.min]; - const ratio = this.getTickRatio(); - const effectiveRatio = ratio < 1 ? 1 : ratio; + const density = this.getTickDensity(); + const tickOffset = tickInterval * density; let current = this.min; - const tickOffset = tickInterval * effectiveRatio; while (current < this.max) { current += tickOffset; From 00a0c3e799c1991b1e2f00390ba0714f2502da7f Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 2 Aug 2023 12:05:55 -0700 Subject: [PATCH 4/4] improve story layout --- .../src/components/slider/slider.stories.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/calcite-components/src/components/slider/slider.stories.ts b/packages/calcite-components/src/components/slider/slider.stories.ts index 9c79647c8f4..727510e2d1f 100644 --- a/packages/calcite-components/src/components/slider/slider.stories.ts +++ b/packages/calcite-components/src/components/slider/slider.stories.ts @@ -395,6 +395,12 @@ export const WithLargeFontSize_TestOnly = (): string => html` `; export const maxTickRendering_TestOnly = (): string => html` + +