@rokkit/chart 1.0.0-next.16 → 1.0.0-next.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.16",
+  "version": "1.0.0-next.18",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,28 +13,28 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "@sveltejs/vite-plugin-svelte": "^2.1.1",
     "@testing-library/svelte": "^3.2.2",
     "@vitest/ui": "~0.12.10",
-    "eslint": "^8.33.0",
+    "eslint": "^8.39.0",
     "js-yaml": "^4.1.0",
     "jsdom": "^19.0.0",
-    "svelte": "^3.55.1",
+    "svelte": "^3.58.0",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
+    "vite": "^4.3.2",
     "vitest": "~0.19.1",
-    "shared-config": "1.0.0",
-    "eslint-config-shared": "1.0.0"
+    "eslint-config-shared": "1.0.0",
+    "shared-config": "1.0.0"
   },
   "dependencies": {
-    "d3-array": "^3.2.2",
+    "d3-array": "^3.2.3",
     "d3-collection": "^1.0.7",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "date-fns": "^2.29.3",
     "ramda": "^0.28.0",
     "yootils": "^0.3.1",
-    "@rokkit/core": "1.0.0-next.16"
+    "@rokkit/core": "1.0.0-next.18"
   },
   "files": [
     "src/**/*.js",

package/src/chart/Swatch.svelte

@@ -17,7 +17,7 @@
 	export let rows
 	export let limit
 	export let start = 0
-	export let autoscale = false
+	// export let autoscale = false
 	export let interactive = false
 	export let activeIndex = -1
 

package/src/chart/TimelapseChart.svelte

@@ -7,7 +7,7 @@
 	import Axis from './Axis.svelte'
 	import BoxPlot from '../plots/BoxPlot.svelte'
 	import ViolinPlot from '../plots/ViolinPlot.svelte'
-	import ScatterPlot from '../plots/ScatterPlot.svelte'
+	import ScatterPlot from '../plots/old_ScatterPlot.svelte'
 
 	let chart = writable({})
 	let axis
@@ -31,8 +31,8 @@
 			height: 350,
 			values: {
 				x: uniques(data, x),
-				y: uniques(data, y),
-			},
+				y: uniques(data, y)
+			}
 		}
 	}
 
@@ -42,7 +42,7 @@
 			...x,
 			data: data.filter(
 				(y) => y.Petal_Length >= x.lowerBound && y.Petal_Length < x.upperBound
-			),
+			)
 		}))
 
 		return groups

package/src/components/index.js

@@ -9,9 +9,9 @@ export { default as SwatchGrid } from './chart/SwatchGrid.svelte'
 export { default as Axis } from './chart/Axis.svelte'
 export { default as Grid } from './chart/Grid.svelte'
 
-export { default as BoxPlot } from './plots/BoxPlot.svelte'
+export { default as BoxPlot } from '../plots/BoxPlot.svelte'
 export { default as ViolinPlot } from '../plots/ViolinPlot.svelte'
-export { default as ScatterPlot } from './plots/ScatterPlot.svelte'
+export { default as ScatterPlot } from '../plots/ScatterPlot.svelte'
 export { default as FunnelPlot } from '../plots/FunnelPlot.svelte'
 
 export { default as Chart } from './chart/Chart.svelte'

package/src/components/lib/chart.js

@@ -1,5 +1,5 @@
 import { nest } from 'd3-collection'
-import { max, quantile, ascending, histogram } from 'd3-array'
+import { max, quantile, ascending } from 'd3-array'
 import { scaleLinear } from 'd3-scale'
 import { area, curveCatmullRom } from 'd3-shape'
 import { getScale } from './utils'

package/src/index.js

@@ -12,5 +12,5 @@ export { default as BarPlot } from './plots/BarPlot.svelte'
 export { default as LinePlot } from './plots/LinePlot.svelte'
 export { default as BoxPlot } from './plots/BoxPlot.svelte'
 export { default as ViolinPlot } from './plots/ViolinPlot.svelte'
-export { default as ScatterPlot } from './plots/ScatterPlot.svelte'
+export { default as ScatterPlot } from './plots/old_ScatterPlot.svelte'
 export * from './components/lib'

package/src/plots/BoxPlot.svelte

@@ -0,0 +1,54 @@
+<script>
+  import { getContext } from 'svelte'
+
+  let chart = getContext('chart')
+
+  export let whisker = true
+  export let boxWidth = 150
+  export let stroke = 'green'
+  export let fill = '#69b3a2' // fixed color or attribute to be used for color
+  export let scaleFill = () => fill // defaults to fill color
+
+  $: data = $chart.summary()
+</script>
+
+{#each data as { key, value }}
+  <rect
+    width={boxWidth}
+    height={$chart.axis.y.scale(value.q1) - $chart.axis.y.scale(value.q3)}
+    x={$chart.axis.x.scale(key) - boxWidth / 2}
+    y={$chart.axis.y.scale(value.q3)}
+    fill={scaleFill(value[fill])}
+    {stroke}
+  />
+  <line
+    x1={$chart.axis.x.scale(key) - boxWidth / 2}
+    x2={$chart.axis.x.scale(key) + boxWidth / 2}
+    y1={$chart.axis.y.scale(value.median)}
+    y2={$chart.axis.y.scale(value.median)}
+    {stroke}
+  />
+  <line
+    x1={$chart.axis.x.scale(key)}
+    x2={$chart.axis.x.scale(key)}
+    y1={$chart.axis.y.scale(value.min)}
+    y2={$chart.axis.y.scale(value.max)}
+    {stroke}
+  />
+  {#if whisker}
+    <line
+      x1={$chart.axis.x.scale(key) - boxWidth / 8}
+      x2={$chart.axis.x.scale(key) + boxWidth / 8}
+      y1={$chart.axis.y.scale(value.min)}
+      y2={$chart.axis.y.scale(value.min)}
+      {stroke}
+    />
+    <line
+      x1={$chart.axis.x.scale(key) - boxWidth / 8}
+      x2={$chart.axis.x.scale(key) + boxWidth / 8}
+      y1={$chart.axis.y.scale(value.max)}
+      y2={$chart.axis.y.scale(value.max)}
+      {stroke}
+    />
+  {/if}
+{/each}

package/src/plots/Plot.svelte

@@ -1,25 +1,25 @@
 <script>
-  import { aggregate, getScales } from '../lib/utils'
+	import { aggregate, getScales } from '../lib/utils'
 
-  import BoxPlot from './BoxPlot.svelte'
-  import ScatterPlot from './ScatterPlot.svelte'
+	import BoxPlot from './BoxPlot.svelte'
+	import ScatterPlot from './old_ScatterPlot.svelte'
 
-  export let data
-  export let width
-  export let height
-  export let x
-  export let y
-  export let plots = []
+	export let data
+	export let width
+	export let height
+	export let x
+	export let y
+	export let plots = []
 
-  $: nested = aggregate(data, x, y)
-  $: scales = getScales(data, x, y, width, height)
+	$: nested = aggregate(data, x, y)
+	$: scales = getScales(data, x, y, width, height)
 </script>
 
 <svg viewBox="0 0 {width} {height}">
-  {#if plots.includes('box')}
-    <BoxPlot data={nested} {...scales} />
-  {/if}
-  {#if plots.includes('scatter')}
-    <ScatterPlot {data} {x} {y} {...scales} />
-  {/if}
+	{#if plots.includes('box')}
+		<BoxPlot data={nested} {...scales} />
+	{/if}
+	{#if plots.includes('scatter')}
+		<ScatterPlot {data} {x} {y} {...scales} />
+	{/if}
 </svg>

package/src/plots/ScatterPlot.svelte

@@ -1,20 +1,30 @@
 <script>
-	import { getContext } from 'svelte'
-	import { colorBrewer } from '../lib/colors'
+  import { clamp } from 'yootils'
+  import Symbol from '../chart/Symbol.svelte'
+  import { getContext } from 'svelte'
 
-	let chart = getContext('chart')
+  const chart = getContext('chart')
 
-	export let size = $chart.height / 128
+  export let size = 8
+  export let fill = '#c0c0c0'
+  export let stroke = '#3c3c3c'
+  export let jitterWidth = 50
+  export let offset
 
-	$: colors = colorBrewer($chart.data.map((d) => d.fill))
-	$: points = $chart.data.map((d) => ({
-		cx: $chart.scale.x(d.x),
-		cy: $chart.scale.y(d.y),
-		fill: colors[d.fill]
-	}))
-	// support shapes and sizes for scatter
+  $: jitterWidth = clamp(jitterWidth, 0, 100 / 2)
+  $: offset = clamp(offset | (jitterWidth / 2), 0, 100)
 </script>
 
-{#each points as { cx, cy, fill }}
-	<circle {cx} {cy} r={size} {fill} fill-opacity="0.5" />
-{/each}
+{#if $chart.data}
+  {#each $chart.data as d}
+    <Symbol
+      x={$chart.axis.x.scale(d[$chart.x]) -
+        offset +
+        Math.random() * jitterWidth}
+      y={$chart.axis.y.scale(d[$chart.y])}
+      {fill}
+      {stroke}
+      {size}
+    />
+  {/each}
+{/if}

package/src/plots/index.js

@@ -6,5 +6,5 @@ export { default as Line } from './LinePlot.svelte'
 export { default as LinePlot } from './LinePlot.svelte'
 export { default as Violin } from './ViolinPlot.svelte'
 export { default as ViolinPlot } from './ViolinPlot.svelte'
-export { default as Scatter } from './ScatterPlot.svelte'
-export { default as ScatterPlot } from './ScatterPlot.svelte'
+export { default as Scatter } from './old_ScatterPlot.svelte'
+export { default as ScatterPlot } from './old_ScatterPlot.svelte'

package/src/plots/old_ScatterPlot.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { getContext } from 'svelte'
+	import { colorBrewer } from '../lib/colors'
+
+	let chart = getContext('chart')
+
+	export let size = $chart.height / 128
+
+	$: colors = colorBrewer($chart.data.map((d) => d.fill))
+	$: points = $chart.data.map((d) => ({
+		cx: $chart.scale.x(d.x),
+		cy: $chart.scale.y(d.y),
+		fill: colors[d.fill]
+	}))
+	// support shapes and sizes for scatter
+</script>
+
+{#each points as { cx, cy, fill }}
+	<circle {cx} {cy} r={size} {fill} fill-opacity="0.5" />
+{/each}

package/src/components/plots/BoxPlot.svelte

@@ -1,54 +0,0 @@
-<script>
-  import { getContext } from 'svelte'
-
-  let chart = getContext('chart')
-
-  export let whisker = true
-  export let boxWidth = 150
-  export let stroke = 'green'
-  export let fill = '#69b3a2' // fixed color or attribute to be used for color
-  export let scaleFill = () => fill // defaults to fill color
-
-  $: data = $chart.summary()
-</script>
-
-{#each data as { key, value }}
-  <rect
-    width={boxWidth}
-    height={$chart.axis.y.scale(value.q1) - $chart.axis.y.scale(value.q3)}
-    x={$chart.axis.x.scale(key) - boxWidth / 2}
-    y={$chart.axis.y.scale(value.q3)}
-    fill={scaleFill(value[fill])}
-    {stroke}
-  />
-  <line
-    x1={$chart.axis.x.scale(key) - boxWidth / 2}
-    x2={$chart.axis.x.scale(key) + boxWidth / 2}
-    y1={$chart.axis.y.scale(value.median)}
-    y2={$chart.axis.y.scale(value.median)}
-    {stroke}
-  />
-  <line
-    x1={$chart.axis.x.scale(key)}
-    x2={$chart.axis.x.scale(key)}
-    y1={$chart.axis.y.scale(value.min)}
-    y2={$chart.axis.y.scale(value.max)}
-    {stroke}
-  />
-  {#if whisker}
-    <line
-      x1={$chart.axis.x.scale(key) - boxWidth / 8}
-      x2={$chart.axis.x.scale(key) + boxWidth / 8}
-      y1={$chart.axis.y.scale(value.min)}
-      y2={$chart.axis.y.scale(value.min)}
-      {stroke}
-    />
-    <line
-      x1={$chart.axis.x.scale(key) - boxWidth / 8}
-      x2={$chart.axis.x.scale(key) + boxWidth / 8}
-      y1={$chart.axis.y.scale(value.max)}
-      y2={$chart.axis.y.scale(value.max)}
-      {stroke}
-    />
-  {/if}
-{/each}

package/src/components/plots/ScatterPlot.svelte

@@ -1,30 +0,0 @@
-<script>
-  import { clamp } from 'yootils'
-  import Symbol from '../chart/Symbol.svelte'
-  import { getContext } from 'svelte'
-
-  const chart = getContext('chart')
-
-  export let size = 8
-  export let fill = '#c0c0c0'
-  export let stroke = '#3c3c3c'
-  export let jitterWidth = 50
-  export let offset
-
-  $: jitterWidth = clamp(jitterWidth, 0, 100 / 2)
-  $: offset = clamp(offset | (jitterWidth / 2), 0, 100)
-</script>
-
-{#if $chart.data}
-  {#each $chart.data as d}
-    <Symbol
-      x={$chart.axis.x.scale(d[$chart.x]) -
-        offset +
-        Math.random() * jitterWidth}
-      y={$chart.axis.y.scale(d[$chart.y])}
-      {fill}
-      {stroke}
-      {size}
-    />
-  {/each}
-{/if}