layerchart 0.52.0 → 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 +8 -2
  3. package/dist/components/charts/BarChart.svelte +15 -3
  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
@@ -96,7 +96,13 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
96
96
  <Axis
97
97
  placement={radial ? 'radius' : 'left'}
98
98
  grid
99
- format={(value) => format(value, undefined, { variant: 'short' })}
99
+ format={(value) => {
100
+ if (seriesLayout === 'stackExpand') {
101
+ return format(value, 'percentRound');
102
+ } else {
103
+ return format(value, undefined, { variant: 'short' });
104
+ }
105
+ }}
100
106
  {...typeof axis === 'object' ? axis : null}
101
107
  {...props.yAxis}
102
108
  />
@@ -187,7 +193,7 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
187
193
  {#if legend}
188
194
  <Legend
189
195
  scale={scaleOrdinal(
190
- series.map((s) => s.key),
196
+ series.map((s) => s.label ?? s.key),
191
197
  series.map((s) => s.color)
192
198
  )}
193
199
  placement="bottom"
package/dist/components/charts/BarChart.svelte CHANGED
@@ -138,7 +138,13 @@ $: if (stackSeries) {
138
138
  <Axis
139
139
  placement="left"
140
140
  grid={isVertical}
141
- format={(value) => format(value, undefined, { variant: 'short' })}
141
+ format={(value) => {
142
+ if (isVertical && seriesLayout === 'stackExpand') {
143
+ return format(value, 'percentRound');
144
+ } else {
145
+ return format(value, undefined, { variant: 'short' });
146
+ }
147
+ }}
142
148
  {...typeof axis === 'object' ? axis : null}
143
149
  {...props.yAxis}
144
150
  />
@@ -148,7 +154,13 @@ $: if (stackSeries) {
148
154
  <Axis
149
155
  placement="bottom"
150
156
  grid={!isVertical}
151
- format={(value) => format(value, undefined, { variant: 'short' })}
157
+ format={(value) => {
158
+ if (!isVertical && seriesLayout === 'stackExpand') {
159
+ return format(value, 'percentRound');
160
+ } else {
161
+ return format(value, undefined, { variant: 'short' });
162
+ }
163
+ }}
152
164
  {...typeof axis === 'object' ? axis : null}
153
165
  {...props.xAxis}
154
166
  />
@@ -202,7 +214,7 @@ $: if (stackSeries) {
202
214
  {#if legend}
203
215
  <Legend
204
216
  scale={scaleOrdinal(
205
- series.map((s) => s.key),
217
+ series.map((s) => s.label ?? s.key),
206
218
  series.map((s) => s.color)
207
219
  )}
208
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.0",
7
+ "version": "0.53.0",
8
8
  "devDependencies": {
9
9
  "@changesets/cli": "^2.27.7",
10
10
  "@mdi/js": "^7.4.47",