@rokkit/chart 1.0.0-next.88 → 1.0.0-next.89

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 (7) hide show
  1. package/package.json +6 -6
  2. package/src/Symbol.svelte +3 -3
  3. package/src/symbols/{Square.svelte → RoundedSquare.svelte} +4 -4
  4. package/src/symbols/Shape.svelte +4 -4
  5. package/src/symbols/index.js +4 -8
  6. package/src/symbols/Circle.svelte +0 -22
  7. 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.88",
3
+ "version": "1.0.0-next.89",
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.88"
25
+ "shared-config": "1.0.0-next.89"
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.88",
39
- "@rokkit/core": "1.0.0-next.88",
40
- "@rokkit/molecules": "1.0.0-next.88",
41
- "@rokkit/stores": "1.0.0-next.88"
38
+ "@rokkit/atoms": "1.0.0-next.89",
39
+ "@rokkit/core": "1.0.0-next.89",
40
+ "@rokkit/molecules": "1.0.0-next.89",
41
+ "@rokkit/stores": "1.0.0-next.89"
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 shape = 'circle'
9
+ export let name = 'circle'
10
10
  /** @type Object<string, any> */
11
11
  export let using = components
12
12
 
13
- $: component = using[shape] || using.default
14
- $: props = using[shape] ? $$restProps : { name: shape, ...$$restProps }
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/symbols/{Square.svelte → RoundedSquare.svelte} RENAMED
@@ -1,11 +1,11 @@
1
1
  <script>
2
2
  export let x = 0
3
3
  export let y = 0
4
- export let size = 10
4
+ export let size = 1
5
5
  export let fill = 'currentColor'
6
6
  export let stroke = 'currentColor'
7
7
 
8
- $: r = size / 2
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={size}
17
- height={size}
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 = 10
6
+ export let size = 1
7
7
  export let fill = 'none'
8
8
  export let stroke = 'currentColor'
9
- export let thickness = 0.5
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 - size/2},{y - size/2})"
21
+ transform="translate({x},{y})"
22
22
  stroke-width={thickness}
23
23
  fill-rule="evenodd"
24
24
  role="button"
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 = ['circle', 'square', 'triangle', ...Object.keys(namedShapes)]
5
+ export const shapes = [...Object.keys(namedShapes), 'rounded-square']
8
6
  export const components = {
9
- circle: Circle,
10
- square: Square,
11
- triangle: Triangle,
12
- default: Shape
7
+ default: Shape,
8
+ 'rounded-square': RoundedSquare
13
9
  }
package/src/symbols/Circle.svelte DELETED
@@ -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
- />
package/src/symbols/Triangle.svelte DELETED
@@ -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
- />