From deb3d30bc6e703348fca420e517c2936715ee0e6 Mon Sep 17 00:00:00 2001 From: James Scott-Brown Date: Fri, 23 May 2025 17:40:00 +0100 Subject: [PATCH 1/2] fix axis labels in example (fix #54) --- src/routes/transforms/interval/+page.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/routes/transforms/interval/+page.md b/src/routes/transforms/interval/+page.md index 9c6101e1..cbe417dd 100644 --- a/src/routes/transforms/interval/+page.md +++ b/src/routes/transforms/interval/+page.md @@ -11,12 +11,12 @@ The interval transform is often used for time-series bar charts. For example, co import { Plot, BarY, RuleY } from 'svelteplot'; import type { Datasets } from '$lib/types.js'; - const MONTH_YEAR = new Intl.DateTimeFormat('en-US', { + const DAY_MONTH = new Intl.DateTimeFormat('en-US', { + day: 'numeric', month: 'short', - year: 'numeric' }); - const tickFormat = (date: Date) => - MONTH_YEAR.format(date).split(' '); + + const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' '); import { page } from '$app/state'; let { aapl } = $derived(page.data.data); @@ -72,12 +72,12 @@ The meaning of the interval mark option depends on the associated mark, such as import { page } from '$app/state'; let { aapl } = $derived(page.data.data); - const MONTH_DAY = new Intl.DateTimeFormat('en-US', { + const DAY_MONTH = new Intl.DateTimeFormat('en-US', { + day: 'numeric', month: 'short', - date: 'numeric' }); - const tickFormat = (date: Date) => - MONTH_DAY.format(date).split(' '); + + const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' '); From 52e6fcec9b269f18ed8738c6703ac9985c8c6676 Mon Sep 17 00:00:00 2001 From: James Scott-Brown Date: Fri, 23 May 2025 21:40:38 +0100 Subject: [PATCH 2/2] put day nuber above month in x-axis label --- src/routes/transforms/interval/+page.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/routes/transforms/interval/+page.md b/src/routes/transforms/interval/+page.md index cbe417dd..16ffd80f 100644 --- a/src/routes/transforms/interval/+page.md +++ b/src/routes/transforms/interval/+page.md @@ -16,7 +16,7 @@ The interval transform is often used for time-series bar charts. For example, co month: 'short', }); - const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' '); + const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ').reverse(); import { page } from '$app/state'; let { aapl } = $derived(page.data.data); @@ -37,9 +37,15 @@ In contrast, a [rectY](/marks/rect) mark with the interval option and the day in import { page } from '$app/state'; let { aapl } = $derived(page.data.data); + + const DAY_MONTH = new Intl.DateTimeFormat('en-US', { + day: 'numeric', + month: 'short', + }); + const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ').reverse(); - + + DAY_MONTH.format(date).split(' '); + const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ').reverse(); pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy