svelteplot 0.0.1-alpha.15 → 0.0.1-alpha.17

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.
@@ -2,7 +2,7 @@ import resolveChannel from '../helpers/resolveChannel.js';
2
2
  import { extent } from 'd3-array';
3
3
  import { CHANNEL_SCALE } from '../contants.js';
4
4
  import { isDateOrNull, isNumberOrNull, isStringOrNull } from '../helpers/typeChecks.js';
5
- import { uniq } from 'underscore';
5
+ import uniq from 'underscore/modules/uniq.js';
6
6
  const FUNCTION = '(function)';
7
7
  export class Scale {
8
8
  name = undefined;
@@ -1,3 +1,3 @@
1
- import type { ScaleName, ChannelName } from './types';
1
+ import type { ScaleName, ChannelName } from './types.js';
2
2
  export declare const SCALE_TYPES: Record<ScaleName, symbol>;
3
3
  export declare const CHANNEL_SCALE: Record<ChannelName, ScaleName>;
@@ -1,5 +1,5 @@
1
1
  import dayjs from 'dayjs';
2
- import { isDate } from 'underscore';
2
+ import isDate from 'underscore/modules/isDate.js';
3
3
  export default function autoTimeFormat(x, plotWidth) {
4
4
  const daysPer100Px = ((toNumber(x.domain[1]) - toNumber(x.domain[0])) / plotWidth / 864e5) * 100;
5
5
  const format = daysPer100Px < 1 ? 'HH:mm\nMMM DD' : daysPer100Px < 30 ? 'DD\nMMM' : 'MMM\nYYYY';
@@ -3,10 +3,9 @@
3
3
  <script>import Area from "./Area.svelte";
4
4
  import { stackX, recordizeX, renameChannels } from "..";
5
5
  let { data: rawData, stack, ...rawChannels } = $props();
6
- let { data, ...channels } = $derived(renameChannels(stackX(recordizeX({ data: rawData, ...rawChannels }), stack), { y: "y1" }));
6
+ let { data, ...channels } = $derived(
7
+ renameChannels(stackX(recordizeX({ data: rawData, ...rawChannels }), stack), { y: "y1" })
8
+ );
7
9
  </script>
8
10
 
9
- <Area
10
- {data}
11
- {...channels}
12
- />
11
+ <Area {data} {...channels} />
@@ -3,11 +3,10 @@
3
3
  <script>import Area from "./Area.svelte";
4
4
  import { stackY, recordizeY, renameChannels } from "..";
5
5
  let { data: rawData, stack, ...rawChannels } = $props();
6
- let { data, ...channels } = $derived(renameChannels(stackY(recordizeY({ data: rawData, ...rawChannels }), stack), { x: "x1" }));
6
+ let { data, ...channels } = $derived(
7
+ renameChannels(stackY(recordizeY({ data: rawData, ...rawChannels }), stack), { x: "x1" })
8
+ );
7
9
  $inspect({ data, channels });
8
10
  </script>
9
11
 
10
- <Area
11
- {data}
12
- {...channels}
13
- />
12
+ <Area {data} {...channels} />
@@ -1,5 +1,4 @@
1
1
  <script>import { getContext } from "svelte";
2
- import { get } from "underscore";
3
2
  import BaseMark from "./BaseMark.svelte";
4
3
  import getBaseStyles from "../helpers/getBaseStyles.js";
5
4
  import autoTimeFormat from "../helpers/autoTimeFormat.js";
@@ -34,9 +34,9 @@ function isValid(value) {
34
34
  ? null
35
35
  : 'currentColor'}
36
36
  style:stroke={maybeStrokeColor ? plot.colorScale(maybeStrokeColor) : null}
37
- transform="translate({[minx, plot.yScale(cy)+inset]})"
37
+ transform="translate({[minx, plot.yScale(cy) + inset]})"
38
38
  width={maxx - minx}
39
- height={plot.yScale.bandwidth()- inset*2}
39
+ height={plot.yScale.bandwidth() - inset * 2}
40
40
  />
41
41
  {/if}
42
42
  {/each}
@@ -1,6 +1,6 @@
1
1
  <script context="module"></script>
2
2
 
3
- <script generics="T extends BaseMarkProps">import { Mark } from "../classes/Mark.svelte";
3
+ <script generics="T extends BaseMarkProps">import { Mark } from "../classes/Mark.svelte.js";
4
4
  import { getContext } from "svelte";
5
5
  const plot = getContext("svelteplot");
6
6
  let {
@@ -1,7 +1,6 @@
1
1
  <script>import { getContext } from "svelte";
2
2
  import BaseMark from "./BaseMark.svelte";
3
3
  import getBaseStyles from "../helpers/getBaseStyles.js";
4
- import { get } from "underscore";
5
4
  const plot = getContext("svelteplot");
6
5
  let { ticks = [], automatic = false, ...styleProps } = $props();
7
6
  let autoTickCount = $derived(plot.plotHeight / (plot.options.y?.tickSpacing || 80));
@@ -1,3 +1,3 @@
1
- import type { TransformArg } from "../types.js";
1
+ import type { TransformArg } from '../types.js';
2
2
  export declare function recordizeX({ data, ...channels }: TransformArg): TransformArg;
3
3
  export declare function recordizeY({ data, ...channels }: TransformArg): TransformArg;
@@ -1,13 +1,17 @@
1
- import isDataRecord from "../helpers/isDataRecord.js";
1
+ import isDataRecord from '../helpers/isDataRecord.js';
2
2
  // This transform takes an array of raw values as input and returns
3
3
  export function recordizeX({ data, ...channels }) {
4
4
  const dataIsRawValueArray = !isDataRecord(data[0]);
5
5
  if (dataIsRawValueArray) {
6
6
  return {
7
- data: data.map((value, index) => ({ __value: value, __index: index, ___orig___: value })),
7
+ data: data.map((value, index) => ({
8
+ __value: value,
9
+ __index: index,
10
+ ___orig___: value
11
+ })),
8
12
  ...channels,
9
13
  x: '__value',
10
- y: '__index',
14
+ y: '__index'
11
15
  };
12
16
  }
13
17
  return { data, ...channels };
@@ -18,10 +22,14 @@ export function recordizeY({ data, ...channels }) {
18
22
  const dataIsRawValueArray = !isDataRecord(data[0]);
19
23
  if (dataIsRawValueArray) {
20
24
  return {
21
- data: data.map((value, index) => ({ __value: value, __index: index, ___orig___: value })),
25
+ data: data.map((value, index) => ({
26
+ __value: value,
27
+ __index: index,
28
+ ___orig___: value
29
+ })),
22
30
  ...channels,
23
31
  x: '__index',
24
- y: '__value',
32
+ y: '__value'
25
33
  };
26
34
  }
27
35
  return { data, ...channels };
@@ -1,4 +1,4 @@
1
- import type { ChannelName, TransformArg } from "../types.js";
1
+ import type { ChannelName, TransformArg } from '../types.js';
2
2
  type RenameChannelsOptions = Record<ChannelName, ChannelName>;
3
3
  export declare function renameChannels({ data, ...channels }: TransformArg, options: RenameChannelsOptions): TransformArg;
4
4
  export {};
@@ -13,7 +13,7 @@ const STACK_ORDER = {
13
13
  none: stackOrderNone,
14
14
  sum: stackOrderAscending,
15
15
  appearance: stackOrderAppearance,
16
- "inside-out": stackOrderInsideOut,
16
+ 'inside-out': stackOrderInsideOut
17
17
  };
18
18
  const STACK_OFFSET = {
19
19
  none: null,
@@ -26,7 +26,9 @@ function stackXY(byDim, data, channels, options) {
26
26
  const secondDim = byDim === 'x' ? 'y' : 'x';
27
27
  const byLow = `${byDim}1`;
28
28
  const byHigh = `${byDim}2`;
29
- if (channels[byDim] !== undefined && channels[`${byLow}`] === undefined && channels[`${byHigh}`] === undefined) {
29
+ if (channels[byDim] !== undefined &&
30
+ channels[`${byLow}`] === undefined &&
31
+ channels[`${byHigh}`] === undefined) {
30
32
  const resolvedData = data.map((d) => ({
31
33
  ...(isDataRecord(d) ? d : { __orig: d }),
32
34
  [`__${secondDim}`]: resolveChannel(secondDim, d, channels),
@@ -42,7 +44,7 @@ function stackXY(byDim, data, channels, options) {
42
44
  .order(stackOrder)
43
45
  .offset(STACK_OFFSET[options.offset])
44
46
  .keys(union(resolvedData.map((d) => d.__group)))
45
- .value(([, group], key) => group.get(key) ? group.get(key)[`__${byDim}`] : 0)(indexed);
47
+ .value(([, group], key) => (group.get(key) ? group.get(key)[`__${byDim}`] : 0))(indexed);
46
48
  const newData = series
47
49
  .map((values) => {
48
50
  const groupKey = values.key;
@@ -55,7 +57,12 @@ function stackXY(byDim, data, channels, options) {
55
57
  })
56
58
  .flat(1);
57
59
  console.log({ newData });
58
- return { data: newData, ...channels, [byDim]: undefined, ...{ [byLow]: `__${byLow}`, [byHigh]: `__${byHigh}` } };
60
+ return {
61
+ data: newData,
62
+ ...channels,
63
+ [byDim]: undefined,
64
+ ...{ [byLow]: `__${byLow}`, [byHigh]: `__${byHigh}` }
65
+ };
59
66
  }
60
67
  return { data, ...channels };
61
68
  }
package/dist/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { Snippet } from 'svelte';
2
2
  import type { SCALE_TYPES } from './contants.js';
3
- import type { Plot } from './classes/Plot.svelte';
3
+ import type { Plot } from './classes/Plot.svelte.js';
4
4
  import type { MouseEventHandler } from 'svelte/elements';
5
5
  export type ScaleName = 'opacity' | 'color' | 'x' | 'y' | 'angle' | 'radius' | 'symbol' | 'width' | 'fontSize';
6
6
  export type Datasets = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelteplot",
3
- "version": "0.0.1-alpha.15",
3
+ "version": "0.0.1-alpha.17",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build",
@@ -32,14 +32,15 @@
32
32
  "devDependencies": {
33
33
  "@playwright/test": "^1.40.1",
34
34
  "@sveltejs/adapter-auto": "^3.1.0",
35
- "@sveltejs/kit": "^2.0.8",
35
+ "@sveltejs/kit": "^2.3.2",
36
36
  "@types/chroma-js": "^2.4.3",
37
+ "@types/d3-dsv": "^3.0.7",
37
38
  "@types/d3-interpolate": "^3.0.4",
38
39
  "@types/d3-random": "^3.0.3",
39
40
  "@types/d3-scale-chromatic": "^3.0.3",
40
41
  "@types/d3-shape": "^3.1.6",
41
- "@typescript-eslint/eslint-plugin": "^6.18.1",
42
- "@typescript-eslint/parser": "^6.18.1",
42
+ "@typescript-eslint/eslint-plugin": "^6.19.0",
43
+ "@typescript-eslint/parser": "^6.19.0",
43
44
  "bulma": "^0.9.4",
44
45
  "d3-dsv": "^3.0.1",
45
46
  "dayjs": "^1.11.10",
@@ -48,16 +49,16 @@
48
49
  "eslint-plugin-svelte": "^2.35.1",
49
50
  "highlight.js": "^11.9.0",
50
51
  "highlightjs-svelte": "^1.0.6",
51
- "prettier": "^3.1.1",
52
+ "prettier": "^3.2.2",
52
53
  "prettier-plugin-svelte": "^3.1.2",
53
54
  "sass": "^1.69.7",
54
- "svelte": "5.0.0-next.30",
55
- "svelte-check": "^3.6.2",
55
+ "svelte": "5.0.0-next.35",
56
+ "svelte-check": "^3.6.3",
56
57
  "svelte-highlight": "^7.4.8",
57
58
  "tslib": "^2.6.2",
58
59
  "typescript": "^5.3.3",
59
60
  "vite": "^5.0.11",
60
- "vitest": "^1.1.3"
61
+ "vitest": "^1.2.0"
61
62
  },
62
63
  "svelte": "./dist/index.js",
63
64
  "types": "./dist/index.d.ts",