@rokkit/chart 1.0.0-next.99 → 1.0.2

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 (137) hide show
  1. package/README.md +150 -46
  2. package/package.json +40 -51
  3. package/src/AnimatedPlot.svelte +383 -0
  4. package/src/Chart.svelte +87 -59
  5. package/src/ChartExporter.svelte +125 -0
  6. package/src/ChartLegend.svelte +148 -0
  7. package/src/ChartProvider.svelte +10 -0
  8. package/src/FacetPlot/Panel.svelte +37 -0
  9. package/src/FacetPlot.svelte +114 -0
  10. package/src/Plot/Arc.svelte +29 -0
  11. package/src/Plot/Area.svelte +32 -0
  12. package/src/Plot/Axis.svelte +164 -0
  13. package/src/Plot/Bar.svelte +54 -0
  14. package/src/Plot/Grid.svelte +34 -0
  15. package/src/Plot/Legend.svelte +268 -0
  16. package/src/Plot/Line.svelte +37 -0
  17. package/src/Plot/Point.svelte +40 -0
  18. package/src/Plot/Root.svelte +62 -0
  19. package/src/Plot/Timeline.svelte +95 -0
  20. package/src/Plot/Tooltip.svelte +87 -0
  21. package/src/Plot/index.js +9 -0
  22. package/src/Plot.svelte +313 -0
  23. package/src/PlotState.svelte.js +375 -0
  24. package/src/Sparkline.svelte +108 -0
  25. package/src/Symbol.svelte +15 -11
  26. package/src/Texture.svelte +9 -7
  27. package/src/charts/AreaChart.svelte +30 -0
  28. package/src/charts/BarChart.svelte +31 -0
  29. package/src/charts/BoxPlot.svelte +24 -0
  30. package/src/charts/BubbleChart.svelte +28 -0
  31. package/src/charts/LineChart.svelte +31 -0
  32. package/src/charts/PieChart.svelte +35 -0
  33. package/src/charts/ScatterPlot.svelte +31 -0
  34. package/src/charts/ViolinPlot.svelte +24 -0
  35. package/src/crossfilter/CrossFilter.svelte +42 -0
  36. package/src/crossfilter/FilterBar.svelte +24 -0
  37. package/src/crossfilter/FilterHistogram.svelte +290 -0
  38. package/src/crossfilter/FilterSlider.svelte +83 -0
  39. package/src/crossfilter/createCrossFilter.svelte.js +124 -0
  40. package/src/elements/Bar.svelte +20 -16
  41. package/src/elements/ColorRamp.svelte +19 -19
  42. package/src/elements/ContinuousLegend.svelte +41 -19
  43. package/src/elements/DefinePatterns.svelte +9 -7
  44. package/src/elements/DiscreteLegend.svelte +13 -11
  45. package/src/elements/Label.svelte +4 -9
  46. package/src/elements/SymbolGrid.svelte +8 -9
  47. package/src/examples/BarChartExample.svelte +81 -0
  48. package/src/geoms/Arc.svelte +126 -0
  49. package/src/geoms/Area.svelte +78 -0
  50. package/src/geoms/Bar.svelte +200 -0
  51. package/src/geoms/Box.svelte +113 -0
  52. package/src/geoms/Candlestick.svelte +110 -0
  53. package/src/geoms/Heatmap.svelte +92 -0
  54. package/src/geoms/Hexbin.svelte +114 -0
  55. package/src/geoms/LabelPill.svelte +17 -0
  56. package/src/geoms/Line.svelte +123 -0
  57. package/src/geoms/Point.svelte +145 -0
  58. package/src/geoms/Ribbon.svelte +161 -0
  59. package/src/geoms/Violin.svelte +56 -0
  60. package/src/geoms/Waterfall.svelte +114 -0
  61. package/src/geoms/lib/areas.js +154 -0
  62. package/src/geoms/lib/bars.js +223 -0
  63. package/src/index.js +81 -2
  64. package/src/lib/brewing/BoxBrewer.svelte.js +14 -0
  65. package/src/lib/brewing/CartesianBrewer.svelte.js +21 -0
  66. package/src/lib/brewing/PieBrewer.svelte.js +14 -0
  67. package/src/lib/brewing/QuartileBrewer.svelte.js +51 -0
  68. package/src/lib/brewing/ViolinBrewer.svelte.js +14 -0
  69. package/src/lib/brewing/axes.svelte.js +270 -0
  70. package/src/lib/brewing/bars.svelte.js +201 -0
  71. package/src/lib/brewing/brewer.svelte.js +277 -0
  72. package/src/lib/brewing/colors.js +157 -0
  73. package/src/lib/brewing/dimensions.svelte.js +56 -0
  74. package/src/lib/brewing/index.svelte.js +205 -0
  75. package/src/lib/brewing/legends.svelte.js +137 -0
  76. package/src/lib/brewing/marks/arcs.js +43 -0
  77. package/src/lib/brewing/marks/areas.js +72 -0
  78. package/src/lib/brewing/marks/bars.js +49 -0
  79. package/src/lib/brewing/marks/boxes.js +75 -0
  80. package/src/lib/brewing/marks/lines.js +55 -0
  81. package/src/lib/brewing/marks/points.js +105 -0
  82. package/src/lib/brewing/marks/violins.js +90 -0
  83. package/src/lib/brewing/patterns.js +45 -0
  84. package/src/lib/brewing/scales.js +51 -0
  85. package/src/lib/brewing/scales.svelte.js +82 -0
  86. package/src/lib/brewing/stats.js +74 -0
  87. package/src/lib/brewing/symbols.js +10 -0
  88. package/src/lib/brewing/types.js +73 -0
  89. package/src/lib/chart.js +16 -8
  90. package/src/lib/context.js +131 -0
  91. package/src/lib/keyboard-nav.js +37 -0
  92. package/src/lib/plot/chartProps.js +76 -0
  93. package/src/lib/plot/crossfilter.js +16 -0
  94. package/src/lib/plot/facet.js +58 -0
  95. package/src/lib/plot/frames.js +81 -0
  96. package/src/lib/plot/helpers.js +14 -0
  97. package/src/lib/plot/preset.js +67 -0
  98. package/src/lib/plot/scales.js +81 -0
  99. package/src/lib/plot/stat.js +92 -0
  100. package/src/lib/plot/types.js +65 -0
  101. package/src/lib/preset.js +41 -0
  102. package/src/lib/scales.svelte.js +151 -0
  103. package/src/lib/swatch.js +4 -7
  104. package/src/lib/utils.js +142 -0
  105. package/src/lib/xscale.js +31 -0
  106. package/src/patterns/DefinePatterns.svelte +32 -0
  107. package/src/patterns/PatternDef.svelte +27 -0
  108. package/src/patterns/index.js +4 -14
  109. package/src/patterns/patterns.js +360 -0
  110. package/src/patterns/scale.js +116 -0
  111. package/src/spec/chart-spec.js +72 -0
  112. package/src/symbols/RoundedSquare.svelte +18 -12
  113. package/src/symbols/Shape.svelte +22 -16
  114. package/src/symbols/constants/index.js +1 -1
  115. package/LICENSE +0 -21
  116. package/src/lib/index.js +0 -4
  117. package/src/lib/plots.js +0 -27
  118. package/src/patterns/Brick.svelte +0 -17
  119. package/src/patterns/Circles.svelte +0 -18
  120. package/src/patterns/CrossHatch.svelte +0 -14
  121. package/src/patterns/CurvedWave.svelte +0 -9
  122. package/src/patterns/Dots.svelte +0 -19
  123. package/src/patterns/OutlineCircles.svelte +0 -15
  124. package/src/patterns/Tile.svelte +0 -17
  125. package/src/patterns/Triangles.svelte +0 -15
  126. package/src/patterns/Waves.svelte +0 -13
  127. package/src/patterns/paths/NamedPattern.svelte +0 -12
  128. package/src/patterns/paths/constants.js +0 -4
  129. package/src/plots/Plot.svelte +0 -40
  130. package/src/plots/index.js +0 -1
  131. package/src/template/Texture.svelte +0 -16
  132. package/src/template/constants.js +0 -43
  133. package/src/template/shapes/Circles.svelte +0 -16
  134. package/src/template/shapes/Lines.svelte +0 -17
  135. package/src/template/shapes/Path.svelte +0 -12
  136. package/src/template/shapes/Polygons.svelte +0 -18
  137. package/src/template/shapes/index.js +0 -4
@@ -1,17 +0,0 @@
1
- <script>
2
- export let size = 10
3
- export let thickness = 0.5
4
- export let stroke = 'currentColor'
5
-
6
- $: lines = [
7
- { x1: 0, y1: 0.25 * size, x2: 0.5 * size, y2: 0.25 * size },
8
- { x1: 0.5 * size, y1: 0.75 * size, x2: size, y2: 0.75 * size },
9
- { x1: 0, y1: 0, x2: 0, y2: size },
10
- { x1: size, y1: 0, x2: size, y2: size },
11
- { x1: 0.5 * size, y1: 0, x2: 0.5 * size, y2: size }
12
- ]
13
- </script>
14
-
15
- {#each lines as line}
16
- <line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
17
- {/each}
@@ -1,18 +0,0 @@
1
- <script>
2
- export let size = 10
3
- export let fill = 'currentColor'
4
- export let stroke = 'currentColor'
5
-
6
- $: data = [
7
- { cx: 0, cy: 0, r: 0.5 },
8
- { cx: 1, cy: 1, r: 0.5 }
9
- ].map(({ cx, cy, r }) => ({
10
- cx: cx * size,
11
- cy: cy * size,
12
- r: r * size
13
- }))
14
- </script>
15
-
16
- {#each data as { cx, cy, r }}
17
- <circle {cx} {cy} {r} {fill} {stroke} />
18
- {/each}
@@ -1,14 +0,0 @@
1
- <script>
2
- export let size = 10
3
- export let thickness = 0.5
4
- export let stroke = 'currentColor'
5
-
6
- $: lines = [
7
- { x1: 0, y1: 0, x2: size, y2: size },
8
- { x1: 0, y1: size, x2: size, y2: 0 }
9
- ]
10
- </script>
11
-
12
- {#each lines as line}
13
- <line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
14
- {/each}
@@ -1,9 +0,0 @@
1
- <script>
2
- import NamedPattern from './paths/NamedPattern.svelte'
3
-
4
- export let size = 10
5
- export let thickness = 0.5
6
- export let stroke = 'currentColor'
7
- </script>
8
-
9
- <NamedPattern {size} {thickness} {stroke} name="curvedWave" />
@@ -1,19 +0,0 @@
1
- <script>
2
- export let size = 10
3
- export let fill = 'currentColor'
4
-
5
- $: data = [
6
- { cx: 0.2 * size, cy: 0.2 * size },
7
- { cx: 0.4 * size, cy: 0.4 * size },
8
- { cx: 0.6 * size, cy: 0.6 * size },
9
- { cx: 0.8 * size, cy: 0.8 * size },
10
- { cx: 0.8 * size, cy: 0.2 * size },
11
- { cx: 0.6 * size, cy: 0.4 * size },
12
- { cx: 0.4 * size, cy: 0.6 * size },
13
- { cx: 0.2 * size, cy: 0.8 * size }
14
- ].map((x) => ({ ...x, r: 0.08 * size }))
15
- </script>
16
-
17
- {#each data as { cx, cy, r }}
18
- <circle {cx} {cy} {r} {fill} />
19
- {/each}
@@ -1,15 +0,0 @@
1
- <script>
2
- export let size = 10
3
- export let fill = 'currentColor'
4
- export let stroke = 'currentColor'
5
-
6
- const centres = [
7
- { cx: 0, cy: 0 },
8
- { cx: size, cy: size }
9
- ]
10
- $: r = 0.5 * size
11
- </script>
12
-
13
- {#each centres as { cx, cy }}
14
- <circle {cx} {cy} {r} {fill} {stroke} />
15
- {/each}
@@ -1,17 +0,0 @@
1
- <script>
2
- const thickness = 0.5
3
- export let size = 10
4
- export let stroke = 'currentColor'
5
-
6
- const lines = [
7
- { x1: 0, y1: 0.25 * size, x2: 0.5 * size, y2: 0.25 * size },
8
- { x1: 0.5 * size, y1: 0.75 * size, x2: size, y2: 0.75 * size },
9
- { x1: 0, y1: 0, x2: 0, y2: size },
10
- { x1: size, y1: 0, x2: size, y2: size },
11
- { x1: 0.5 * size, y1: 0, x2: 0.5 * size, y2: size }
12
- ]
13
- </script>
14
-
15
- {#each lines as line}
16
- <line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
17
- {/each}
@@ -1,15 +0,0 @@
1
- <script>
2
- export let size = 10
3
- export let fill = 'currentColor'
4
- export let stroke = 'currentColor'
5
-
6
- const polygons = [
7
- [0, 0.5 * size, 0.5 * size, size, 0, size],
8
- [0.5 * size, 0, 0, 0, 0, 0.5 * size],
9
- [size, 0, 0.5 * size, 0.5 * size, size, size]
10
- ]
11
- </script>
12
-
13
- {#each polygons as points}
14
- <polygon points={points.join(', ')} {fill} {stroke} stroke-width="0" />
15
- {/each}
@@ -1,13 +0,0 @@
1
- <script>
2
- import { scaledPath } from '@rokkit/core'
3
-
4
- export let size = 10
5
- export let thickness = 0.5
6
- export let stroke = 'currentColor'
7
- export let fill = 'none'
8
- export let data = []
9
-
10
- $: d = scaledPath(size, data)
11
- </script>
12
-
13
- <path {d} {stroke} stroke-width={thickness} {fill} />
@@ -1,12 +0,0 @@
1
- <script>
2
- import { patterns } from './constants'
3
-
4
- export let size = 10
5
- export let thickness = 0.5
6
- export let stroke = 'currentColor'
7
- export let name = 'cross-hatch'
8
-
9
- $: d = patterns[name](size)
10
- </script>
11
-
12
- <path {d} {stroke} stroke-width={thickness} fill="none" />
@@ -1,4 +0,0 @@
1
- import { scaledPathCollection } from '../../lib/utils'
2
- import paths from './patterns.json'
3
-
4
- export const patterns = scaledPathCollection(paths)
@@ -1,40 +0,0 @@
1
- <script>
2
- import { plotter } from '../lib/plots'
3
- import { compact } from '@rokkit/core'
4
- export let data = []
5
- /** @type {'lineY'|'lineX'|'dot'|'plot'|'bar'} */
6
- export let type = 'dot'
7
- export let width = null
8
- export let height = null
9
- export let x = 'x'
10
- export let y = 'y'
11
- export let fill = null
12
- export let stroke = null
13
- export let symbol = null
14
- export let grid = true
15
- export let legend = false
16
- export let labels = {}
17
- export let tip = true
18
- export let channels = null
19
-
20
- $: showLegend = compact({
21
- stroke: stroke ? { legend } : null,
22
- color: fill && !symbol ? { legend } : null,
23
- symbol: symbol ? { legend } : null
24
- })
25
- $: config = {
26
- data,
27
- type,
28
- aes: compact({ x, y, fill, stroke, symbol, tip, channels }),
29
- opts: compact({
30
- width,
31
- height,
32
- grid,
33
- ...showLegend,
34
- x: { label: labels?.x ?? x },
35
- y: { label: labels?.y ?? y }
36
- })
37
- }
38
- </script>
39
-
40
- <plot use:plotter={config} />
@@ -1 +0,0 @@
1
- export { default as Plot } from './Plot.svelte'
@@ -1,16 +0,0 @@
1
- <script>
2
- import { library } from './constants'
3
- import * as templates from './shapes'
4
- import { pick } from 'ramda'
5
-
6
- export let size = 10
7
- export let fill = 'none'
8
- export let stroke = 'none'
9
- export let thickness = 0.5
10
- export let name = 'Waves'
11
-
12
- $: pattern = library[name]
13
- $: props = pick(pattern.allowed ?? [], { fill, stroke, thickness })
14
- </script>
15
-
16
- <svelte:component this={templates[pattern.component]} {size} {...props} data={pattern.data} />
@@ -1,43 +0,0 @@
1
- export const library = {
2
- Brick: {
3
- component: 'Lines',
4
- allowed: ['stroke'],
5
- data: [
6
- { x1: 0, y1: 0.25, x2: 0.5, y2: 0.25 },
7
- { x1: 0.5, y1: 0.75, x2: 1, y2: 0.75 },
8
- { x1: 0, y1: 0, x2: 0, y2: 1 },
9
- { x1: 1, y1: 0, x2: 1, y2: 1 },
10
- { x1: 0.5, y1: 0, x2: 0.5, y2: 1 }
11
- ]
12
- },
13
- Circles: {
14
- component: 'Circles',
15
- allowed: ['fill', 'stroke'],
16
- data: [
17
- { cx: 0, cy: 0, r: 0.5 },
18
- { cx: 1, cy: 1, r: 0.5 }
19
- ]
20
- },
21
- Dominoes: {
22
- component: 'Circles',
23
- allowed: ['fill'],
24
- data: [
25
- { cx: 0.2, cy: 0.2, r: 0.8 },
26
- { cx: 0.4, cy: 0.4, r: 0.8 },
27
- { cx: 0.6, cy: 0.6, r: 0.8 },
28
- { cx: 0.8, cy: 0.8, r: 0.8 },
29
- { cx: 0.8, cy: 0.2, r: 0.8 },
30
- { cx: 0.6, cy: 0.4, r: 0.8 },
31
- { cx: 0.4, cy: 0.6, r: 0.8 },
32
- { cx: 0.2, cy: 0.8, r: 0.8 }
33
- ]
34
- },
35
- Waves: {
36
- component: 'Path',
37
- stroke: true,
38
- data: [
39
- ['M', 0, 0.25],
40
- ['A', 0.6, 0.5, 0, 0, 0, 1, 0.25]
41
- ]
42
- }
43
- }
@@ -1,16 +0,0 @@
1
- <script>
2
- export let size = 10
3
- export let fill = 'currentColor'
4
- export let stroke = 'currentColor'
5
- export let data
6
-
7
- $: circles = data.map(({ cx, cy, r }) => ({
8
- cx: cx * size,
9
- cy: cy * size,
10
- r: r * size
11
- }))
12
- </script>
13
-
14
- {#each circles as { cx, cy, r }}
15
- <circle {cx} {cy} {r} {fill} {stroke} />
16
- {/each}
@@ -1,17 +0,0 @@
1
- <script>
2
- export let size = 10
3
- export let thickness = 0.5
4
- export let stroke = 'currentColor'
5
- export let data = []
6
-
7
- $: lines = data.map(({ x1, y1, x2, y2 }) => ({
8
- x1: x1 * size,
9
- y1: y1 * size,
10
- x2: x2 * size,
11
- y2: y2 * size
12
- }))
13
- </script>
14
-
15
- {#each lines as line}
16
- <line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
17
- {/each}
@@ -1,12 +0,0 @@
1
- <script>
2
- import { scaledPath } from '@rokkit/core'
3
-
4
- export let size = 10
5
- export let thickness = 0.5
6
- export let stroke = 'currentColor'
7
- export let data = []
8
-
9
- $: d = scaledPath(size, data)
10
- </script>
11
-
12
- <path {d} {stroke} stroke-width={thickness} fill="none" />
@@ -1,18 +0,0 @@
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}
@@ -1,4 +0,0 @@
1
- export { default as Circles } from './Circles.svelte'
2
- export { default as Lines } from './Lines.svelte'
3
- export { default as Path } from './Path.svelte'
4
- export { default as Polygons } from './Polygons.svelte'