Skip to content

Commit a825987

Browse files
techniqtechniq
committed
Merge branch 'next' of https://github.com/techniq/layerchart into next
2 parents 87d479b + aaa5282 commit a825987

7 files changed

Lines changed: 129 additions & 7 deletions

File tree

‎.changeset/happy-bats-eat.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'layerchart': patch
3+
---
4+
5+
fix(Calendar): Respect `start` instead of always start of year

‎.changeset/pre.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"giant-donuts-yell",
6262
"green-mirrors-retire",
6363
"grumpy-ties-mix",
64+
"happy-bats-eat",
6465
"heavy-signs-kick",
6566
"honest-hoops-peel",
6667
"hot-pigs-push",

‎packages/layerchart/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# LayerChart
22

3+
## 2.0.0-next.42
4+
5+
### Patch Changes
6+
7+
- fix(Calendar): Respect `start` instead of always start of year ([#657](https://github.com/techniq/layerchart/pull/657))
8+
39
## 2.0.0-next.41
410

511
### Patch Changes

‎packages/layerchart/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"license": "MIT",
66
"repository": "techniq/layerchart",
77
"homepage": "https://layerchart.com",
8-
"version": "2.0.0-next.41",
8+
"version": "2.0.0-next.42",
99
"scripts": {
1010
"dev": "vite dev --port 3002",
1111
"build": "vite build",

‎packages/layerchart/src/lib/components/Calendar.svelte‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
yearDays.map((date) => {
108108
const cellData = dataByDate.get(date) ?? { date };
109109
return {
110-
x: timeWeek.count(timeYear(date), date) * cellSize[0],
110+
x: timeWeek.count(start, date) * cellSize[0],
111111
y: date.getDay() * cellSize[1],
112112
color: ctx.config.c ? ctx.cGet(cellData) : 'transparent',
113113
data: cellData,
@@ -136,14 +136,19 @@
136136

137137
{#if monthPath}
138138
{#each yearMonths as date}
139-
<MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'lc-calendar-month-path')} />
139+
<MonthPath
140+
{date}
141+
startOfRange={start}
142+
{cellSize}
143+
{...extractLayerProps(monthPath, 'lc-calendar-month-path')}
144+
/>
140145
{/each}
141146
{/if}
142147

143148
{#if monthLabel}
144149
{#each yearMonths as date}
145150
<Text
146-
x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellSize[0]}
151+
x={timeWeek.count(start, timeWeek.ceil(date)) * cellSize[0]}
147152
value={format(date, 'month', { variant: 'short' })}
148153
capHeight="7px"
149154
{...extractLayerProps(monthLabel, 'lc-calendar-month-label')}

‎packages/layerchart/src/lib/components/MonthPath.svelte‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@
1515
*/
1616
cellSize: number | [number, number];
1717
18+
/**
19+
* The start date of the calendar (used to calculate week offsets).
20+
*/
21+
startOfRange: Date;
22+
1823
/**
1924
* A bindable reference to the underlying `<path>` element.
2025
*
@@ -38,6 +43,7 @@
3843
let {
3944
date,
4045
cellSize: cellSizeProp,
46+
startOfRange,
4147
pathRef: pathRefProp = $bindable(),
4248
class: className,
4349
...restProps
@@ -54,12 +60,12 @@
5460
5561
// start of month
5662
const startDayOfWeek = $derived(date.getDay());
57-
const startWeek = $derived(timeWeek.count(timeYear(date), date));
63+
const startWeek = $derived(timeWeek.count(startOfRange, date));
5864
5965
// end of month
6066
const monthEnd = $derived(endOfInterval('month', date));
6167
const endDayOfWeek = $derived(monthEnd.getDay());
62-
const endWeek = $derived(timeWeek.count(timeYear(monthEnd), monthEnd));
68+
const endWeek = $derived(timeWeek.count(startOfRange, monthEnd));
6369
6470
const pathData = $derived(`
6571
M${(startWeek + 1) * cellSize[0]},${startDayOfWeek * cellSize[1]}

‎packages/layerchart/src/routes/docs/components/Calendar/+page.svelte‎

Lines changed: 100 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,18 @@
88
import Preview from '$lib/docs/Preview.svelte';
99
import { createDateSeries } from '$lib/utils/genData.js';
1010
import { shared } from '../../shared.svelte.js';
11-
import { endOfInterval } from '@layerstack/utils';
11+
import { endOfInterval, intervalOffset, startOfInterval } from '@layerstack/utils';
1212
1313
const now = new Date();
1414
const firstDayOfYear = timeYear.floor(now);
1515
const lastDayOfYear = endOfInterval('year', now);
1616
17+
const previousMonth = intervalOffset('month', now, -1);
18+
const firstDayOfPreviousMonth = startOfInterval('month', previousMonth);
19+
const lastDayOfPreviousMonth = endOfInterval('month', previousMonth);
20+
21+
const ninetyDaysAgo = intervalOffset('day', now, -90);
22+
1723
const data = createDateSeries({ count: 365 * 4, min: 10, max: 100, value: 'integer' }).map(
1824
(d) => {
1925
return {
@@ -306,3 +312,96 @@
306312
</Chart>
307313
</div>
308314
</Preview>
315+
316+
<h2>Last month</h2>
317+
318+
<Preview {data}>
319+
<div class="h-[200px] p-4 border rounded-sm">
320+
<Chart
321+
{data}
322+
x="date"
323+
c="value"
324+
cScale={scaleThreshold().unknown('transparent')}
325+
cDomain={[25, 50, 75]}
326+
cRange={[
327+
'var(--color-primary-100)',
328+
'var(--color-primary-300)',
329+
'var(--color-primary-500)',
330+
'var(--color-primary-700)',
331+
]}
332+
padding={{ top: 20 }}
333+
>
334+
{#snippet children({ context })}
335+
<Layer type={shared.renderContext}>
336+
<Calendar
337+
start={firstDayOfPreviousMonth}
338+
end={lastDayOfPreviousMonth}
339+
tooltipContext={context.tooltip}
340+
monthPath
341+
/>
342+
</Layer>
343+
344+
<Tooltip.Root>
345+
{#snippet children({ data })}
346+
<Tooltip.Header value={data.date} format="day" />
347+
348+
{#if data.value != null}
349+
<Tooltip.List>
350+
<Tooltip.Item
351+
label="value"
352+
value={data.value}
353+
format="integer"
354+
valueAlign="right"
355+
/>
356+
</Tooltip.List>
357+
{/if}
358+
{/snippet}
359+
</Tooltip.Root>
360+
{/snippet}
361+
</Chart>
362+
</div>
363+
</Preview>
364+
365+
<h2>90 days</h2>
366+
367+
<Preview {data}>
368+
<div class="h-[200px] p-4 border rounded-sm">
369+
<Chart
370+
{data}
371+
x="date"
372+
c="value"
373+
cScale={scaleThreshold().unknown('transparent')}
374+
cDomain={[25, 50, 75]}
375+
cRange={[
376+
'var(--color-primary-100)',
377+
'var(--color-primary-300)',
378+
'var(--color-primary-500)',
379+
'var(--color-primary-700)',
380+
]}
381+
padding={{ top: 20 }}
382+
>
383+
{#snippet children({ context })}
384+
<Layer type={shared.renderContext}>
385+
<Calendar start={ninetyDaysAgo} end={now} tooltipContext={context.tooltip} monthPath />
386+
</Layer>
387+
388+
<Tooltip.Root>
389+
{#snippet children({ data })}
390+
<Tooltip.Header value={data.date} format="day" />
391+
392+
{#if data.value != null}
393+
<Tooltip.List>
394+
<Tooltip.Item
395+
label="value"
396+
value={data.value}
397+
format="integer"
398+
valueAlign="right"
399+
/>
400+
</Tooltip.List>
401+
{/if}
402+
{/snippet}
403+
</Tooltip.Root>
404+
{/snippet}
405+
</Chart>
406+
</div>
407+
</Preview>

0 commit comments

Comments
 (0)