@rokkit/chart 1.0.0-next.89 → 1.0.0-next.91
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/Chart.svelte +3 -3
- package/src/elements/Label.svelte +1 -2
- package/src/elements/SymbolGrid.svelte +3 -3
- package/src/index.js +0 -2
- package/src/lib/chart.js +3 -3
- package/src/lib/plots.js +4 -1
- package/src/lib/swatch.js +0 -12
- package/src/patterns/Triangles.svelte +1 -1
- package/src/patterns/templates/Circles.svelte +3 -5
- package/src/patterns/templates/Path.svelte +2 -7
- package/src/patterns/templates/Polygons.svelte +18 -0
- package/src/symbols/constants/index.js +7 -0
- package/src/symbols/outline.svelte +60 -0
- package/src/symbols/solid.svelte +60 -0
- package/src/PatternDefs.svelte +0 -14
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.91",
|
|
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.91"
|
|
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.91",
|
|
39
|
+
"@rokkit/core": "1.0.0-next.91",
|
|
40
|
+
"@rokkit/molecules": "1.0.0-next.91",
|
|
41
|
+
"@rokkit/stores": "1.0.0-next.91"
|
|
42
42
|
},
|
|
43
43
|
"files": [
|
|
44
44
|
"src/**/*.js",
|
package/src/Chart.svelte
CHANGED
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
top: marginTop,
|
|
30
30
|
bottom: marginBottom
|
|
31
31
|
}
|
|
32
|
-
$: patterns = [...new Set(data.map((d) => d[pattern]))]
|
|
33
|
-
$: fills = [...new Set(data.map((d) => d[fill]))]
|
|
34
|
-
$: colors = [...new Set(data.map((d) => d[color]))]
|
|
32
|
+
// $: patterns = [...new Set(data.map((d) => d[pattern]))]
|
|
33
|
+
// $: fills = [...new Set(data.map((d) => d[fill]))]
|
|
34
|
+
// $: colors = [...new Set(data.map((d) => d[color]))]
|
|
35
35
|
$: config.set(
|
|
36
36
|
chart(data, {
|
|
37
37
|
x,
|
|
@@ -6,9 +6,8 @@
|
|
|
6
6
|
export let small = false
|
|
7
7
|
export let anchor = 'middle'
|
|
8
8
|
|
|
9
|
-
|
|
10
9
|
$: transform = `translate(${x},${y}) rotate(${angle})`
|
|
11
|
-
$: anchor = ['start','middle','end'].includes(anchor) ? anchor : 'middle'
|
|
10
|
+
$: anchor = ['start', 'middle', 'end'].includes(anchor) ? anchor : 'middle'
|
|
12
11
|
</script>
|
|
13
12
|
|
|
14
13
|
<text class="label" class:small text-anchor={anchor} {transform}>{text}</text>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
export let size = 4
|
|
7
7
|
export let shade = 600
|
|
8
8
|
|
|
9
|
-
$: grid = swatchGrid(
|
|
9
|
+
$: grid = swatchGrid($swatch.keys.symbol.length, size, 10)
|
|
10
10
|
</script>
|
|
11
11
|
|
|
12
12
|
<svg viewBox="0 0 {grid.width} {grid.height}">
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
<Symbol
|
|
15
15
|
{x}
|
|
16
16
|
{y}
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
size={r * 2}
|
|
18
|
+
name={$swatch.keys.symbol[index]}
|
|
19
19
|
fill={$swatch.palette[base][shade]}
|
|
20
20
|
stroke={$swatch.palette[base][shade]}
|
|
21
21
|
/>
|
package/src/index.js
CHANGED
package/src/lib/chart.js
CHANGED
|
@@ -76,9 +76,9 @@ class Chart {
|
|
|
76
76
|
this.data = data.map((d) => ({
|
|
77
77
|
x: this.flipCoords ? d[this.y] : d[this.x],
|
|
78
78
|
y: this.flipCoords ? d[this.x] : d[this.y],
|
|
79
|
-
fill: d[this.fill],
|
|
80
|
-
color: d[this.color]
|
|
81
|
-
shape: d[this.shape]
|
|
79
|
+
// fill: d[this.fill],
|
|
80
|
+
color: d[this.color]
|
|
81
|
+
// shape: d[this.shape]
|
|
82
82
|
}))
|
|
83
83
|
|
|
84
84
|
this.refresh()
|
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
|
}
|
package/src/lib/swatch.js
CHANGED
|
@@ -1,23 +1,11 @@
|
|
|
1
|
-
// import { omit } from 'ramda'
|
|
2
1
|
import { writable } from 'svelte/store'
|
|
3
2
|
import { palette } from './palette'
|
|
4
|
-
// import { patterns } from '../patterns/constants'
|
|
5
3
|
import * as patterns from '../patterns'
|
|
6
4
|
import { shapes } from '../symbols'
|
|
7
5
|
|
|
8
|
-
// const combinedPatterns = {
|
|
9
|
-
// ...patterns,
|
|
10
|
-
// ...omit(['NamedPattern'], components)
|
|
11
|
-
// }
|
|
12
|
-
|
|
13
|
-
// const combinedShapes = {
|
|
14
|
-
// ...namedShapes,
|
|
15
|
-
// ...shapes
|
|
16
|
-
// }
|
|
17
6
|
export const swatch = writable({
|
|
18
7
|
palette,
|
|
19
8
|
patterns,
|
|
20
|
-
// symbols: combinedShapes,
|
|
21
9
|
keys: {
|
|
22
10
|
gray: ['gray'],
|
|
23
11
|
color: Object.keys(palette).filter((name) => name !== 'gray'),
|
|
@@ -2,17 +2,15 @@
|
|
|
2
2
|
export let size = 10
|
|
3
3
|
export let fill = 'currentColor'
|
|
4
4
|
export let stroke = 'currentColor'
|
|
5
|
+
export let data
|
|
5
6
|
|
|
6
|
-
$:
|
|
7
|
-
{ cx: 0, cy: 0, r: 0.5 },
|
|
8
|
-
{ cx: 1, cy: 1, r: 0.5 }
|
|
9
|
-
].map(({ cx, cy, r }) => ({
|
|
7
|
+
$: circles = data.map(({ cx, cy, r }) => ({
|
|
10
8
|
cx: cx * size,
|
|
11
9
|
cy: cy * size,
|
|
12
10
|
r: r * size
|
|
13
11
|
}))
|
|
14
12
|
</script>
|
|
15
13
|
|
|
16
|
-
{#each
|
|
14
|
+
{#each circles as { cx, cy, r }}
|
|
17
15
|
<circle {cx} {cy} {r} {fill} {stroke} />
|
|
18
16
|
{/each}
|
|
@@ -4,14 +4,9 @@
|
|
|
4
4
|
export let size = 10
|
|
5
5
|
export let thickness = 0.5
|
|
6
6
|
export let stroke = 'currentColor'
|
|
7
|
+
export let data = []
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
['M', 0, 0.25],
|
|
10
|
-
['A', 0.6, 0.5, 0, 0, 0, 1, 0.25]
|
|
11
|
-
// ['M', 0, 0.75],
|
|
12
|
-
// ['A', 0.6, 0.5, 0, 0, 0, 1, 0.75]
|
|
13
|
-
]
|
|
14
|
-
$: d = scaledPath(size, paths)
|
|
9
|
+
$: d = scaledPath(size, data)
|
|
15
10
|
</script>
|
|
16
11
|
|
|
17
12
|
<path {d} {stroke} stroke-width={thickness} fill="none" />
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let size = 10
|
|
3
|
+
export let thickness = 0.5
|
|
4
|
+
export let fill = 'currentColor'
|
|
5
|
+
export let stroke = 'currentColor'
|
|
6
|
+
export let data = []
|
|
7
|
+
|
|
8
|
+
const polygons = data.map((points) => points.map((point) => point * size).join(', '))
|
|
9
|
+
// [
|
|
10
|
+
// [0, 0.5 * size, 0.5 * size, size, 0, size],
|
|
11
|
+
// [0.5 * size, 0, 0, 0, 0, 0.5 * size],
|
|
12
|
+
// [size, 0, 0.5 * size, 0.5 * size, size, size]
|
|
13
|
+
// ]
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
{#each polygons as points}
|
|
17
|
+
<polygon {points} {fill} {stroke} stroke-width={thickness} />
|
|
18
|
+
{/each}
|
|
@@ -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
|
|
@@ -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
|
+
>
|
package/src/PatternDefs.svelte
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import Texture from './Texture.svelte'
|
|
3
|
-
|
|
4
|
-
export let thickness = 0.5
|
|
5
|
-
export let patterns = []
|
|
6
|
-
export let size = 10
|
|
7
|
-
</script>
|
|
8
|
-
|
|
9
|
-
<defs>
|
|
10
|
-
{#each patterns as { id, path, fill, stroke }}
|
|
11
|
-
{@const p = typeof path === 'function' ? path(size) : path}
|
|
12
|
-
<Texture {id} path={p} {fill} {stroke} {thickness} {size} />
|
|
13
|
-
{/each}
|
|
14
|
-
</defs>
|