@rokkit/chart 1.0.0-next.88 → 1.0.0-next.90
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.
- package/package.json +6 -6
- package/src/Symbol.svelte +3 -3
- package/src/lib/plots.js +4 -1
- package/src/symbols/{Square.svelte → RoundedSquare.svelte} +4 -4
- package/src/symbols/Shape.svelte +4 -4
- package/src/symbols/constants/index.js +7 -0
- package/src/symbols/index.js +4 -8
- package/src/symbols/outline.svelte +60 -0
- package/src/symbols/solid.svelte +60 -0
- package/src/symbols/Circle.svelte +0 -22
- package/src/symbols/Triangle.svelte +0 -24
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rokkit/chart",
|
|
3
|
-
"version": "1.0.0-next.
|
|
3
|
+
"version": "1.0.0-next.90",
|
|
4
4
|
"description": "Components for making interactive charts.",
|
|
5
5
|
"author": "Jerry Thomas <me@jerrythomas.name>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"typescript": "^5.3.3",
|
|
23
23
|
"vite": "^5.1.4",
|
|
24
24
|
"vitest": "~1.3.1",
|
|
25
|
-
"shared-config": "1.0.0-next.
|
|
25
|
+
"shared-config": "1.0.0-next.90"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@observablehq/plot": "^0.6.13",
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"date-fns": "^3.3.1",
|
|
36
36
|
"ramda": "^0.29.1",
|
|
37
37
|
"yootils": "^0.3.1",
|
|
38
|
-
"@rokkit/atoms": "1.0.0-next.
|
|
39
|
-
"@rokkit/core": "1.0.0-next.
|
|
40
|
-
"@rokkit/molecules": "1.0.0-next.
|
|
41
|
-
"@rokkit/stores": "1.0.0-next.
|
|
38
|
+
"@rokkit/atoms": "1.0.0-next.90",
|
|
39
|
+
"@rokkit/core": "1.0.0-next.90",
|
|
40
|
+
"@rokkit/molecules": "1.0.0-next.90",
|
|
41
|
+
"@rokkit/stores": "1.0.0-next.90"
|
|
42
42
|
},
|
|
43
43
|
"files": [
|
|
44
44
|
"src/**/*.js",
|
package/src/Symbol.svelte
CHANGED
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
export let size = 10
|
|
7
7
|
export let fill = 'currentColor'
|
|
8
8
|
export let stroke = 'currentColor'
|
|
9
|
-
export let
|
|
9
|
+
export let name = 'circle'
|
|
10
10
|
/** @type Object<string, any> */
|
|
11
11
|
export let using = components
|
|
12
12
|
|
|
13
|
-
$: component = using[
|
|
14
|
-
$: props = using[
|
|
13
|
+
$: component = using[name] || using.default
|
|
14
|
+
$: props = using[name] ? $$restProps : { name, ...$$restProps }
|
|
15
15
|
</script>
|
|
16
16
|
|
|
17
17
|
<svelte:component this={component} {x} {y} {size} {fill} {stroke} {...props} />
|
package/src/lib/plots.js
CHANGED
|
@@ -5,7 +5,10 @@ export function plotter(node, options) {
|
|
|
5
5
|
// let chart = Plot.lineY(options.data).plot({ grid: true })
|
|
6
6
|
|
|
7
7
|
function render() {
|
|
8
|
-
const chart = Plot[type](data, aes).plot(
|
|
8
|
+
const chart = Plot[type](data, aes).plot({
|
|
9
|
+
color: { scheme: 'turbo', range: [0.1, 0.9] },
|
|
10
|
+
...opts
|
|
11
|
+
})
|
|
9
12
|
node.firstChild?.remove() // remove old chart, if any
|
|
10
13
|
node.append(chart)
|
|
11
14
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
export let x = 0
|
|
3
3
|
export let y = 0
|
|
4
|
-
export let size =
|
|
4
|
+
export let size = 1
|
|
5
5
|
export let fill = 'currentColor'
|
|
6
6
|
export let stroke = 'currentColor'
|
|
7
7
|
|
|
8
|
-
$: r = size
|
|
8
|
+
$: r = size * 3.534
|
|
9
9
|
$: props = { rx: r * 0.1, ry: r * 0.1, ...$$restProps }
|
|
10
10
|
</script>
|
|
11
11
|
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
<rect
|
|
14
14
|
x={x - r}
|
|
15
15
|
y={y - r}
|
|
16
|
-
width={
|
|
17
|
-
height={
|
|
16
|
+
width={r * 2}
|
|
17
|
+
height={r * 2}
|
|
18
18
|
{fill}
|
|
19
19
|
{stroke}
|
|
20
20
|
{...props}
|
package/src/symbols/Shape.svelte
CHANGED
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
|
|
4
4
|
export let x = 0
|
|
5
5
|
export let y = 0
|
|
6
|
-
export let size =
|
|
6
|
+
export let size = 1
|
|
7
7
|
export let fill = 'none'
|
|
8
8
|
export let stroke = 'currentColor'
|
|
9
|
-
export let thickness =
|
|
9
|
+
export let thickness = 1
|
|
10
10
|
|
|
11
11
|
export let name = 'circle'
|
|
12
12
|
|
|
13
|
-
$: d = name in namedShapes ? namedShapes[name](size): namedShapes['star'](size)
|
|
13
|
+
$: d = name in namedShapes ? namedShapes[name](size) : namedShapes['star'](size)
|
|
14
14
|
</script>
|
|
15
15
|
|
|
16
16
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
{d}
|
|
19
19
|
{fill}
|
|
20
20
|
{stroke}
|
|
21
|
-
transform="translate({x
|
|
21
|
+
transform="translate({x},{y})"
|
|
22
22
|
stroke-width={thickness}
|
|
23
23
|
fill-rule="evenodd"
|
|
24
24
|
role="button"
|
|
@@ -5,3 +5,10 @@ export const namedShapes = Object.entries(paths).reduce(
|
|
|
5
5
|
(acc, [key, value]) => ({ ...acc, [key]: (s) => scaledPath(s, value) }),
|
|
6
6
|
{}
|
|
7
7
|
)
|
|
8
|
+
|
|
9
|
+
//diamond
|
|
10
|
+
|
|
11
|
+
// wye
|
|
12
|
+
// <path transform="translate(620,15.25)" d="M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z"></path>
|
|
13
|
+
//
|
|
14
|
+
// outline
|
package/src/symbols/index.js
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import { namedShapes } from './constants'
|
|
2
|
-
import { default as Circle } from './Circle.svelte'
|
|
3
|
-
import { default as Square } from './Square.svelte'
|
|
4
|
-
import { default as Triangle } from './Triangle.svelte'
|
|
5
2
|
import { default as Shape } from './Shape.svelte'
|
|
3
|
+
import { default as RoundedSquare } from './RoundedSquare.svelte'
|
|
6
4
|
|
|
7
|
-
export const shapes = [
|
|
5
|
+
export const shapes = [...Object.keys(namedShapes), 'rounded-square']
|
|
8
6
|
export const components = {
|
|
9
|
-
|
|
10
|
-
square:
|
|
11
|
-
triangle: Triangle,
|
|
12
|
-
default: Shape
|
|
7
|
+
default: Shape,
|
|
8
|
+
'rounded-square': RoundedSquare
|
|
13
9
|
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
class="plot"
|
|
3
|
+
fill="currentColor"
|
|
4
|
+
font-family="system-ui, sans-serif"
|
|
5
|
+
font-size="10"
|
|
6
|
+
text-anchor="middle"
|
|
7
|
+
width="688"
|
|
8
|
+
height="60"
|
|
9
|
+
viewBox="0 0 688 60"
|
|
10
|
+
>
|
|
11
|
+
<style>
|
|
12
|
+
:where(.plot) {
|
|
13
|
+
--plot-background: white;
|
|
14
|
+
display: block;
|
|
15
|
+
height: auto;
|
|
16
|
+
height: intrinsic;
|
|
17
|
+
max-width: 100%;
|
|
18
|
+
}
|
|
19
|
+
:where(.plot text),
|
|
20
|
+
:where(.plot tspan) {
|
|
21
|
+
white-space: pre;
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
24
|
+
<g aria-label="x-axis tick" fill="none" stroke="currentColor"
|
|
25
|
+
><path transform="translate(68,30)" d="M0,0L0,6"></path><path
|
|
26
|
+
transform="translate(160,30)"
|
|
27
|
+
d="M0,0L0,6"
|
|
28
|
+
></path><path transform="translate(252,30)" d="M0,0L0,6"></path><path
|
|
29
|
+
transform="translate(344,30)"
|
|
30
|
+
d="M0,0L0,6"
|
|
31
|
+
></path><path transform="translate(436,30)" d="M0,0L0,6"></path><path
|
|
32
|
+
transform="translate(528,30)"
|
|
33
|
+
d="M0,0L0,6"
|
|
34
|
+
></path><path transform="translate(620,30)" d="M0,0L0,6"></path></g
|
|
35
|
+
><g aria-label="x-axis tick label" transform="translate(0,9)"
|
|
36
|
+
><text y="0.71em" transform="translate(68,30)">asterisk</text><text
|
|
37
|
+
y="0.71em"
|
|
38
|
+
transform="translate(160,30)">circle</text
|
|
39
|
+
><text y="0.71em" transform="translate(252,30)">diamond2</text><text
|
|
40
|
+
y="0.71em"
|
|
41
|
+
transform="translate(344,30)">plus</text
|
|
42
|
+
><text y="0.71em" transform="translate(436,30)">square2</text><text
|
|
43
|
+
y="0.71em"
|
|
44
|
+
transform="translate(528,30)">times</text
|
|
45
|
+
><text y="0.71em" transform="translate(620,30)">triangle2</text></g
|
|
46
|
+
><g aria-label="dot" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
47
|
+
><path transform="translate(160,15.25)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"
|
|
48
|
+
></path><path transform="translate(344,15.25)" d="M-6.873,0L6.873,0M0,6.873L0,-6.873"
|
|
49
|
+
></path><path transform="translate(528,15.25)" d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"
|
|
50
|
+
></path><path transform="translate(620,15.25)" d="M0,-5.443L4.714,2.721L-4.714,2.721Z"
|
|
51
|
+
></path><path
|
|
52
|
+
transform="translate(68,15.25)"
|
|
53
|
+
d="M0,4.769L0,-4.769M-4.13,-2.384L4.13,2.384M-4.13,2.384L4.13,-2.384"
|
|
54
|
+
></path><path
|
|
55
|
+
transform="translate(436,15.25)"
|
|
56
|
+
d="M3.534,3.534L3.534,-3.534L-3.534,-3.534L-3.534,3.534Z"
|
|
57
|
+
></path><path transform="translate(252,15.25)" d="M0,-4.995L4.995,0L0,4.995L-4.995,0Z"
|
|
58
|
+
></path></g
|
|
59
|
+
></svg
|
|
60
|
+
>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
class="plot"
|
|
3
|
+
fill="currentColor"
|
|
4
|
+
font-family="system-ui, sans-serif"
|
|
5
|
+
font-size="10"
|
|
6
|
+
text-anchor="middle"
|
|
7
|
+
width="688"
|
|
8
|
+
height="60"
|
|
9
|
+
viewBox="0 0 688 60"
|
|
10
|
+
><style>
|
|
11
|
+
:where(.plot) {
|
|
12
|
+
--plot-background: white;
|
|
13
|
+
display: block;
|
|
14
|
+
height: auto;
|
|
15
|
+
height: intrinsic;
|
|
16
|
+
max-width: 100%;
|
|
17
|
+
}
|
|
18
|
+
:where(.plot text),
|
|
19
|
+
:where(.plot tspan) {
|
|
20
|
+
white-space: pre;
|
|
21
|
+
}
|
|
22
|
+
</style><g aria-label="x-axis tick" fill="none" stroke="currentColor"
|
|
23
|
+
><path transform="translate(68,30)" d="M0,0L0,6"></path><path
|
|
24
|
+
transform="translate(160,30)"
|
|
25
|
+
d="M0,0L0,6"
|
|
26
|
+
></path><path transform="translate(252,30)" d="M0,0L0,6"></path><path
|
|
27
|
+
transform="translate(344,30)"
|
|
28
|
+
d="M0,0L0,6"
|
|
29
|
+
></path><path transform="translate(436,30)" d="M0,0L0,6"></path><path
|
|
30
|
+
transform="translate(528,30)"
|
|
31
|
+
d="M0,0L0,6"
|
|
32
|
+
></path><path transform="translate(620,30)" d="M0,0L0,6"></path></g
|
|
33
|
+
><g aria-label="x-axis tick label" transform="translate(0,9)"
|
|
34
|
+
><text y="0.71em" transform="translate(68,30)">circle</text><text
|
|
35
|
+
y="0.71em"
|
|
36
|
+
transform="translate(160,30)">cross</text
|
|
37
|
+
><text y="0.71em" transform="translate(252,30)">diamond</text><text
|
|
38
|
+
y="0.71em"
|
|
39
|
+
transform="translate(344,30)">square</text
|
|
40
|
+
><text y="0.71em" transform="translate(436,30)">star</text><text
|
|
41
|
+
y="0.71em"
|
|
42
|
+
transform="translate(528,30)">triangle</text
|
|
43
|
+
><text y="0.71em" transform="translate(620,30)">wye</text></g
|
|
44
|
+
><g aria-label="dot"
|
|
45
|
+
><path transform="translate(68,15.25)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"
|
|
46
|
+
></path><path
|
|
47
|
+
transform="translate(160,15.25)"
|
|
48
|
+
d="M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z"
|
|
49
|
+
></path><path transform="translate(252,15.25)" d="M0,-7.423L4.285,0L0,7.423L-4.285,0Z"
|
|
50
|
+
></path><path transform="translate(344,15.25)" d="M-3.988,-3.988h7.976v7.976h-7.976Z"
|
|
51
|
+
></path><path
|
|
52
|
+
transform="translate(436,15.25)"
|
|
53
|
+
d="M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z"
|
|
54
|
+
></path><path transform="translate(528,15.25)" d="M0,-6.998L6.06,3.499L-6.06,3.499Z"
|
|
55
|
+
></path><path
|
|
56
|
+
transform="translate(620,15.25)"
|
|
57
|
+
d="M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z"
|
|
58
|
+
></path></g
|
|
59
|
+
></svg
|
|
60
|
+
>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export let x = 0
|
|
3
|
-
export let y = 0
|
|
4
|
-
export let size = 10
|
|
5
|
-
export let fill = 'currentColor'
|
|
6
|
-
export let stroke = 'currentColor'
|
|
7
|
-
</script>
|
|
8
|
-
|
|
9
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
10
|
-
<circle
|
|
11
|
-
cx={x}
|
|
12
|
-
cy={y}
|
|
13
|
-
r = {size/2}
|
|
14
|
-
{fill}
|
|
15
|
-
{stroke}
|
|
16
|
-
role="button"
|
|
17
|
-
on:click
|
|
18
|
-
on:mouseover
|
|
19
|
-
on:mouseleave
|
|
20
|
-
on:focus
|
|
21
|
-
tabindex="0"
|
|
22
|
-
/>
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export let x = 0
|
|
3
|
-
export let y = 0
|
|
4
|
-
export let size = 10
|
|
5
|
-
export let fill = 'currentColor'
|
|
6
|
-
export let stroke = 'currentColor'
|
|
7
|
-
|
|
8
|
-
$: r = size / 2
|
|
9
|
-
$: h = Math.sqrt(3) * r
|
|
10
|
-
$: points = [x, y - r, x + h / 2, y + r / 2, x - h / 2, y + r / 2]
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
14
|
-
<polygon
|
|
15
|
-
points={points.join(', ')}
|
|
16
|
-
{fill}
|
|
17
|
-
{stroke}
|
|
18
|
-
role="button"
|
|
19
|
-
on:click
|
|
20
|
-
on:mouseover
|
|
21
|
-
on:mouseleave
|
|
22
|
-
on:focus
|
|
23
|
-
tabindex="0"
|
|
24
|
-
/>
|