svelte-time-series 1.0.8 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +9 -8
  2. package/src/DataSet.svelte +19 -23
  3. package/src/TimeSeries.svelte +54 -54
  4. package/src/index.mjs +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-time-series",
3
- "version": "1.0.8",
3
+ "version": "2.0.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "provenance": true
@@ -44,21 +44,22 @@
44
44
  "devDependencies": {
45
45
  "@semantic-release/commit-analyzer": "^13.0.0",
46
46
  "@semantic-release/exec": "^6.0.3",
47
- "@semantic-release/github": "^10.1.0",
47
+ "@semantic-release/github": "^10.1.3",
48
48
  "@semantic-release/release-notes-generator": "^14.0.1",
49
49
  "@sveltejs/vite-plugin-svelte": "^3.1.1",
50
50
  "documentation": "^14.0.3",
51
- "mf-styling": "^3.1.6",
52
- "npm-pkgbuild": "^15.3.25",
51
+ "mf-styling": "^3.1.7",
52
+ "npm-pkgbuild": "^15.3.27",
53
53
  "semantic-release": "^24.0.0",
54
- "stylelint": "^16.7.0",
54
+ "stylelint": "^16.8.1",
55
55
  "stylelint-config-standard": "^36.0.1",
56
- "svelte": "^5.0.0-next.184",
56
+ "svelte": "^5.0.0-next.203",
57
57
  "testcafe": "^3.6.2",
58
- "vite": "^5.3.3"
58
+ "vite": "^5.3.5",
59
+ "vite-plugin-compression2": "^1.1.3"
59
60
  },
60
61
  "peerDependencies": {
61
- "svelte": "^4.0.0 || ^5.0.0-next.0"
62
+ "svelte": "^5.0.0-next.0"
62
63
  },
63
64
  "optionalDependencies": {
64
65
  "mf-hosting-cloudflare": "^1.0.6",
package/src/DataSet.svelte CHANGED
@@ -1,32 +1,33 @@
1
1
  <script>
2
2
  import { scaleLinear } from "d3-scale";
3
3
 
4
- export let padding;
5
- export let height;
6
- export let width;
4
+ let { padding, height, width, points = [], yTicks = [] } = $props();
7
5
 
8
- export let points = [];
9
- export let yTicks = [];
6
+ let path = $state();
7
+ let area = $state();
10
8
 
11
- let xScale, yScale, path, area;
9
+ let xScale, yScale;
12
10
 
13
- $: {
14
- const minX = points[0].x;
15
- const maxX = points[points.length - 1].x;
11
+ const minX = points[0].x;
12
+ const maxX = points[points.length - 1].x;
16
13
 
17
- xScale = scaleLinear()
18
- .domain([minX, maxX])
19
- .range([padding.left, width - padding.right]);
14
+ xScale = scaleLinear()
15
+ .domain([minX, maxX])
16
+ .range([padding.left, width - padding.right]);
20
17
 
21
- yScale = scaleLinear()
22
- .domain([Math.min.apply(null, yTicks), Math.max.apply(null, yTicks)])
23
- .range([height - padding.bottom, padding.top]);
18
+ yScale = scaleLinear()
19
+ .domain([Math.min.apply(null, yTicks), Math.max.apply(null, yTicks)])
20
+ .range([height - padding.bottom, padding.top]);
24
21
 
25
- path = `M${points.map(p => `${xScale(p.x)},${yScale(p.y)}`).join("L")}`;
26
- area = `${path}L${xScale(maxX)},${yScale(0)}L${xScale(minX)},${yScale(0)}Z`;
27
- }
22
+ path = `M${points.map(p => `${xScale(p.x)},${yScale(p.y)}`).join("L")}`;
23
+ area = `${path}L${xScale(maxX)},${yScale(0)}L${xScale(minX)},${yScale(0)}Z`;
28
24
  </script>
29
25
 
26
+ <svg>
27
+ <path class="path-line" d={path} />
28
+ <path class="path-area" d={area} />
29
+ </svg>
30
+
30
31
  <style>
31
32
  .path-line {
32
33
  fill: none;
@@ -40,8 +41,3 @@
40
41
  fill: rgba(0, 100, 100, 0.2);
41
42
  }
42
43
  </style>
43
-
44
- <svg>
45
- <path class="path-line" d={path} />
46
- <path class="path-area" d={area} />
47
- </svg>
package/src/TimeSeries.svelte CHANGED
@@ -1,33 +1,63 @@
1
1
  <script>
2
2
  import { scaleLinear } from "d3-scale";
3
3
 
4
- export let width = 500;
5
- export let height = 200;
6
- export let padding = { top: 20, right: 15, bottom: 22, left: 25 };
7
-
8
- export let points = [];
9
- export let yTicks = [];
10
- export let xTicks = [];
11
-
12
- let xScale, yScale;
13
-
14
- $: {
15
- const minX = points[0].x;
16
- const maxX = points[points.length - 1].x;
4
+ let {
5
+ width = 500,
6
+ height = 200,
7
+ padding = { top: 20, right: 15, bottom: 22, left: 25 },
8
+ points = [],
9
+ yTicks = [],
10
+ xTicks = []
11
+ } = $props();
12
+
13
+ let xScale = $state();
14
+ let yScale = $state();
15
+
16
+ const minX = points[0].x;
17
+ const maxX = points[points.length - 1].x;
18
+
19
+ xScale = scaleLinear()
20
+ .domain([minX, maxX])
21
+ .range([padding.left, width - padding.right]);
22
+
23
+ yScale = scaleLinear()
24
+ .domain([Math.min.apply(null, yTicks), Math.max.apply(null, yTicks)])
25
+ .range([height - padding.bottom, padding.top]);
26
+
27
+ function mousemove(event) {}
28
+ </script>
17
29
 
18
- xScale = scaleLinear()
19
- .domain([minX, maxX])
20
- .range([padding.left, width - padding.right]);
30
+ <svg {mousemove}>
31
+ <slot name="y-axis">
32
+ <g class="axis y-axis" transform="translate(0, {padding.top})">
33
+ {#each yTicks as tick}
34
+ <g
35
+ class="tick tick-{tick}"
36
+ transform="translate(0, {yScale(tick) - padding.bottom})"
37
+ >
38
+ <line x2="100%" />
39
+ <text y="-4">{tick}</text>
40
+ </g>
41
+ {/each}
42
+ </g>
43
+ </slot>
21
44
 
22
- yScale = scaleLinear()
23
- .domain([Math.min.apply(null, yTicks), Math.max.apply(null, yTicks)])
24
- .range([height - padding.bottom, padding.top]);
25
- }
45
+ <slot name="x-axis">
46
+ <g class="axis x-axis">
47
+ {#each xTicks as tick}
48
+ <g
49
+ class="tick tick-{tick}"
50
+ transform="translate({xScale(tick)},{height})"
51
+ >
52
+ <line y1="-{height}" y2="-{padding.bottom}" x1="0" x2="0" />
53
+ <text y="-2">{tick}</text>
54
+ </g>
55
+ {/each}
56
+ </g>
57
+ </slot>
26
58
 
27
- function mousemove(event) {
28
- // console.log(event.clientX, event.clientY);
29
- }
30
- </script>
59
+ <slot />
60
+ </svg>
31
61
 
32
62
  <style>
33
63
  svg {
@@ -60,33 +90,3 @@
60
90
  text-anchor: middle;
61
91
  }
62
92
  </style>
63
-
64
- <svg on:mousemove={mousemove}>
65
- <slot name="y-axis">
66
- <g class="axis y-axis" transform="translate(0, {padding.top})">
67
- {#each yTicks as tick}
68
- <g
69
- class="tick tick-{tick}"
70
- transform="translate(0, {yScale(tick) - padding.bottom})">
71
- <line x2="100%" />
72
- <text y="-4">{tick}</text>
73
- </g>
74
- {/each}
75
- </g>
76
- </slot>
77
-
78
- <slot name="x-axis">
79
- <g class="axis x-axis">
80
- {#each xTicks as tick}
81
- <g
82
- class="tick tick-{tick}"
83
- transform="translate({xScale(tick)},{height})">
84
- <line y1="-{height}" y2="-{padding.bottom}" x1="0" x2="0" />
85
- <text y="-2">{tick}</text>
86
- </g>
87
- {/each}
88
- </g>
89
- </slot>
90
-
91
- <slot />
92
- </svg>
package/src/index.mjs CHANGED
@@ -1,4 +1,3 @@
1
1
  import { Scale } from './scale.mjs';
2
2
 
3
-
4
3
  export { Scale };