layerchart 0.52.1 → 0.53.0

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 (11) hide show
  1. package/dist/components/Brush.svelte +4 -4
  2. package/dist/components/charts/AreaChart.svelte +1 -1
  3. package/dist/components/charts/BarChart.svelte +1 -1
  4. package/dist/components/charts/LineChart.svelte +1 -1
  5. package/dist/components/charts/PieChart.svelte +11 -4
  6. package/dist/components/charts/PieChart.svelte.d.ts +1 -0
  7. package/dist/components/charts/ScatterChart.svelte +1 -1
  8. package/dist/utils/genData.d.ts +1 -1
  9. package/dist/utils/genData.js +8 -8
  10. package/dist/utils/stack.test.js +4 -4
  11. package/package.json +1 -1
package/dist/components/Brush.svelte CHANGED
@@ -33,15 +33,15 @@ function handler(fn) {
33
33
  xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax],
34
34
  yDomain: [yDomain[0] ?? yDomainMin, yDomain[1] ?? yDomainMax],
35
35
  value: {
36
- x: $xScale.invert?.(localPoint(frameEl, e)?.x ?? 0 - $padding.left),
37
- y: $yScale.invert?.(localPoint(frameEl, e)?.y ?? 0 - $padding.top),
36
+ x: $xScale.invert?.((localPoint(frameEl, e)?.x ?? 0) - $padding.left),
37
+ y: $yScale.invert?.((localPoint(frameEl, e)?.y ?? 0) - $padding.top),
38
38
  },
39
39
  };
40
40
  dispatch('brushStart', { xDomain, yDomain });
41
41
  const onPointerMove = (e) => {
42
42
  fn(start, {
43
- x: $xScale.invert?.(localPoint(frameEl, e)?.x ?? 0 - $padding.left),
44
- y: $yScale.invert?.(localPoint(frameEl, e)?.y ?? 0 - $padding.top),
43
+ x: $xScale.invert?.((localPoint(frameEl, e)?.x ?? 0) - $padding.left),
44
+ y: $yScale.invert?.((localPoint(frameEl, e)?.y ?? 0) - $padding.top),
45
45
  });
46
46
  // if (xDomain[0] === xDomain[1] || yDomain[0] === yDomain[1]) {
47
47
  // // Ignore?
package/dist/components/charts/AreaChart.svelte CHANGED
@@ -193,7 +193,7 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
193
193
  {#if legend}
194
194
  <Legend
195
195
  scale={scaleOrdinal(
196
- series.map((s) => s.key),
196
+ series.map((s) => s.label ?? s.key),
197
197
  series.map((s) => s.color)
198
198
  )}
199
199
  placement="bottom"
package/dist/components/charts/BarChart.svelte CHANGED
@@ -214,7 +214,7 @@ $: if (stackSeries) {
214
214
  {#if legend}
215
215
  <Legend
216
216
  scale={scaleOrdinal(
217
- series.map((s) => s.key),
217
+ series.map((s) => s.label ?? s.key),
218
218
  series.map((s) => s.color)
219
219
  )}
220
220
  placement="bottom"
package/dist/components/charts/LineChart.svelte CHANGED
@@ -138,7 +138,7 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
138
138
  {#if legend}
139
139
  <Legend
140
140
  scale={scaleOrdinal(
141
- series.map((s) => s.key),
141
+ series.map((s) => s.label ?? s.key),
142
142
  series.map((s) => s.color)
143
143
  )}
144
144
  placement="bottom"
package/dist/components/charts/PieChart.svelte CHANGED
@@ -10,6 +10,9 @@ import Svg from '../layout/Svg.svelte';
10
10
  import * as Tooltip from '../tooltip/index.js';
11
11
  import { accessor, chartDataArray } from '../../utils/common.js';
12
12
  export let data = [];
13
+ /** Key accessor */
14
+ export let key = 'key';
15
+ $: keyAccessor = accessor(key);
13
16
  /** Label accessor */
14
17
  export let label = 'label';
15
18
  $: labelAccessor = accessor(label);
@@ -49,8 +52,8 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
49
52
  <Chart
50
53
  data={chartData}
51
54
  x={value}
52
- y={label}
53
- c={label}
55
+ y={key}
56
+ c={key}
54
57
  cRange={seriesColors.length
55
58
  ? seriesColors
56
59
  : [
@@ -74,7 +77,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
74
77
  let:padding
75
78
  let:tooltip
76
79
  >
77
- {@const slotProps = { label, value, x, xScale, y, yScale, width, height, padding, tooltip }}
80
+ {@const slotProps = { key, label, value, x, xScale, y, yScale, width, height, padding, tooltip }}
78
81
  <slot {...slotProps}>
79
82
  <Svg center>
80
83
  <slot name="below-marks" {...slotProps} />
@@ -138,6 +141,10 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
138
141
  <slot name="legend" {...slotProps}>
139
142
  {#if legend}
140
143
  <Legend
144
+ tickFormat={(tick) => {
145
+ const item = chartData.find((d) => keyAccessor(d) === tick);
146
+ return item ? (labelAccessor(item) ?? tick) : tick;
147
+ }}
141
148
  placement="bottom"
142
149
  variant="swatches"
143
150
  {...props.legend}
@@ -150,7 +157,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
150
157
  <Tooltip.Root let:data>
151
158
  <Tooltip.List>
152
159
  <Tooltip.Item
153
- label={labelAccessor(data)}
160
+ label={labelAccessor(data) || keyAccessor(data)}
154
161
  value={valueAccessor(data)}
155
162
  color={cScale(c(data))}
156
163
  {format}
package/dist/components/charts/PieChart.svelte.d.ts CHANGED
@@ -179,6 +179,7 @@ declare class __sveltets_Render<TData> {
179
179
  } & {
180
180
  cornerRadius?: number;
181
181
  innerRadius?: number | undefined;
182
+ key?: Accessor<TData>;
182
183
  label?: Accessor<TData>;
183
184
  legend?: boolean | {
184
185
  [x: string]: any;
package/dist/components/charts/ScatterChart.svelte CHANGED
@@ -121,7 +121,7 @@ let chartData = series
121
121
  {#if legend}
122
122
  <Legend
123
123
  scale={scaleOrdinal(
124
- series.map((s) => s.key),
124
+ series.map((s) => s.label ?? s.key),
125
125
  series.map((s) => s.color)
126
126
  )}
127
127
  placement="bottom"
package/dist/utils/genData.d.ts CHANGED
@@ -48,7 +48,7 @@ export declare const wideData: {
48
48
  apples: number;
49
49
  bananas: number;
50
50
  cherries: number;
51
- dates: number;
51
+ grapes: number;
52
52
  }[];
53
53
  export declare const longData: {
54
54
  year: number;
package/dist/utils/genData.js CHANGED
@@ -86,28 +86,28 @@ export function createTimeSeries(options) {
86
86
  return timeSeries;
87
87
  }
88
88
  export const wideData = [
89
- { year: 2019, apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
90
- { year: 2018, apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
91
- { year: 2017, apples: 820, bananas: 1000, cherries: 640, dates: 400 },
92
- { year: 2016, apples: 820, bananas: 560, cherries: 720, dates: 400 },
89
+ { year: 2019, apples: 3840, bananas: 1920, cherries: 960, grapes: 400 },
90
+ { year: 2018, apples: 1600, bananas: 1440, cherries: 960, grapes: 400 },
91
+ { year: 2017, apples: 820, bananas: 1000, cherries: 640, grapes: 400 },
92
+ { year: 2016, apples: 820, bananas: 560, cherries: 720, grapes: 400 },
93
93
  ];
94
94
  export const longData = [
95
95
  { year: 2019, basket: 1, fruit: 'apples', value: 3840 },
96
96
  { year: 2019, basket: 1, fruit: 'bananas', value: 1920 },
97
97
  { year: 2019, basket: 2, fruit: 'cherries', value: 960 },
98
- { year: 2019, basket: 2, fruit: 'dates', value: 400 },
98
+ { year: 2019, basket: 2, fruit: 'grapes', value: 400 },
99
99
  { year: 2018, basket: 1, fruit: 'apples', value: 1600 },
100
100
  { year: 2018, basket: 1, fruit: 'bananas', value: 1440 },
101
101
  { year: 2018, basket: 2, fruit: 'cherries', value: 960 },
102
- { year: 2018, basket: 2, fruit: 'dates', value: 400 },
102
+ { year: 2018, basket: 2, fruit: 'grapes', value: 400 },
103
103
  { year: 2017, basket: 1, fruit: 'apples', value: 820 },
104
104
  { year: 2017, basket: 1, fruit: 'bananas', value: 1000 },
105
105
  { year: 2017, basket: 2, fruit: 'cherries', value: 640 },
106
- { year: 2017, basket: 2, fruit: 'dates', value: 400 },
106
+ { year: 2017, basket: 2, fruit: 'grapes', value: 400 },
107
107
  { year: 2016, basket: 1, fruit: 'apples', value: 820 },
108
108
  { year: 2016, basket: 1, fruit: 'bananas', value: 560 },
109
109
  { year: 2016, basket: 2, fruit: 'cherries', value: 720 },
110
- { year: 2016, basket: 2, fruit: 'dates', value: 400 },
110
+ { year: 2016, basket: 2, fruit: 'grapes', value: 400 },
111
111
  ];
112
112
  export function getPhyllotaxis({ radius, count, width, height, }) {
113
113
  // Phyllotaxis: https://www.youtube.com/watch?v=KWoJgHFYWxY
package/dist/utils/stack.test.js CHANGED
@@ -5,19 +5,19 @@ export const testData = [
5
5
  { year: 2019, basket: 1, fruit: 'apples', value: 3840 },
6
6
  { year: 2019, basket: 1, fruit: 'bananas', value: 1920 },
7
7
  { year: 2019, basket: 2, fruit: 'cherries', value: 960 },
8
- { year: 2019, basket: 2, fruit: 'dates', value: 400 },
8
+ { year: 2019, basket: 2, fruit: 'grapes', value: 400 },
9
9
  { year: 2018, basket: 1, fruit: 'apples', value: 1600 },
10
10
  { year: 2018, basket: 1, fruit: 'bananas', value: 1440 },
11
11
  { year: 2018, basket: 2, fruit: 'cherries', value: 960 },
12
- { year: 2018, basket: 2, fruit: 'dates', value: 400 },
12
+ { year: 2018, basket: 2, fruit: 'grapes', value: 400 },
13
13
  { year: 2017, basket: 1, fruit: 'apples', value: 820 },
14
14
  { year: 2017, basket: 1, fruit: 'bananas', value: 1000 },
15
15
  { year: 2017, basket: 2, fruit: 'cherries', value: 640 },
16
- { year: 2017, basket: 2, fruit: 'dates', value: 400 },
16
+ { year: 2017, basket: 2, fruit: 'grapes', value: 400 },
17
17
  { year: 2016, basket: 1, fruit: 'apples', value: 820 },
18
18
  { year: 2016, basket: 1, fruit: 'bananas', value: 560 },
19
19
  { year: 2016, basket: 2, fruit: 'cherries', value: 720 },
20
- { year: 2016, basket: 2, fruit: 'dates', value: 400 },
20
+ { year: 2016, basket: 2, fruit: 'grapes', value: 400 },
21
21
  ];
22
22
  const testDataByYear = group(testData, (d) => d.year);
23
23
  describe('groupStackData', () => {
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "author": "Sean Lynch <techniq35@gmail.com>",
5
5
  "license": "MIT",
6
6
  "repository": "techniq/layerchart",
7
- "version": "0.52.1",
7
+ "version": "0.53.0",
8
8
  "devDependencies": {
9
9
  "@changesets/cli": "^2.27.7",
10
10
  "@mdi/js": "^7.4.47",