@rokkit/chart 1.0.0-next.89 → 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.
Files changed (5) hide show
  1. package/package.json +6 -6
  2. package/src/lib/plots.js +4 -1
  3. package/src/symbols/constants/index.js +7 -0
  4. package/src/symbols/outline.svelte +60 -0
  5. package/src/symbols/solid.svelte +60 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rokkit/chart",
3
- "version": "1.0.0-next.89",
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.89"
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.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"
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/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(opts)
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/symbols/constants/index.js CHANGED
@@ -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/outline.svelte ADDED
@@ -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
+ >
package/src/symbols/solid.svelte ADDED
@@ -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
+ >