@coinbase/cds-mcp-server 8.57.0 → 8.57.1

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 (4) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/mcp-docs/mobile/components/BarChart.txt +235 -223
  3. package/mcp-docs/web/components/BarChart.txt +192 -282
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.57.1 ((3/24/2026, 01:14 PM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
11
15
  ## 8.57.0 ((3/24/2026, 12:46 PM PST))
12
16
 
13
17
  This is an artificial version bump with no new change.
package/mcp-docs/mobile/components/BarChart.txt CHANGED
@@ -34,9 +34,9 @@ To start, pass in a series of data to the chart.
34
34
  />
35
35
  ```
36
36
 
37
- ### Horizontal Bars
37
+ #### Layout
38
38
 
39
- To render horizontal bars, set the `layout` prop to `"horizontal"`. In this layout, the Y axis becomes the categorical axis and the X axis becomes the value axis.
39
+ You can set `layout` to `horizontal` to render the chart horizontally.
40
40
 
41
41
  ```jsx
42
42
  function HorizontalBars() {
@@ -87,46 +87,44 @@ function HorizontalBars() {
87
87
  You can also provide multiple series of data to the chart. Series will have their bars for each data point rendered side by side.
88
88
 
89
89
  ```tsx
90
- function MonthlyGainsByAsset() {
91
- const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
92
-
93
- const tickFormatter = useCallback(
94
- (amount) =>
95
- new Intl.NumberFormat('en-US', {
96
- style: 'currency',
97
- currency: 'USD',
98
- }).format(amount),
99
- [],
100
- );
90
+ function MultipleSeries() {
91
+ const theme = useTheme();
101
92
 
102
93
  return (
103
94
  <BarChart
104
- height={150}
105
- inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
95
+ height={400}
106
96
  series={[
107
97
  {
108
- id: 'btc',
109
- data: [
110
- 345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
111
- 620.57,
112
- ],
113
- color: assets.btc.color,
98
+ id: 'series1',
99
+ data: [5, 1, 3],
100
+ color: `rgb(${theme.spectrum.blue40})`,
101
+ label: 'Series 1',
102
+ },
103
+ {
104
+ id: 'series2',
105
+ data: [2, 4, 6],
106
+ color: `rgb(${theme.spectrum.yellow40})`,
107
+ label: 'Series 2',
114
108
  },
115
109
  {
116
- id: 'eth',
117
- data: [
118
- 270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
119
- 550.93,
120
- ],
121
- color: assets.eth.color,
110
+ id: 'series3',
111
+ data: [1, 2, 3],
112
+ color: `rgb(${theme.spectrum.red40})`,
113
+ label: 'Series 3',
122
114
  },
123
115
  ]}
116
+ legend
117
+ showXAxis
124
118
  showYAxis
119
+ xAxis={{
120
+ data: ['Group A', 'Group B', 'Group C'],
121
+ showLine: true,
122
+ showTickMarks: true,
123
+ }}
125
124
  yAxis={{
125
+ showLine: true,
126
126
  showGrid: true,
127
- GridLineComponent: ThinSolidLine,
128
- tickLabelFormatter: tickFormatter,
129
- width: 70,
127
+ showTickMarks: true,
130
128
  }}
131
129
  />
132
130
  );
@@ -138,63 +136,45 @@ function MonthlyGainsByAsset() {
138
136
  You can also configure stacking for your chart using the `stacked` prop.
139
137
 
140
138
  ```tsx
141
- function MonthlyGainsByAsset() {
142
- const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
143
-
144
- const tickFormatter = useCallback(
145
- (amount) =>
146
- new Intl.NumberFormat('en-US', {
147
- style: 'currency',
148
- currency: 'USD',
149
- }).format(amount),
150
- [],
151
- );
139
+ function StackedBars() {
140
+ const theme = useTheme();
152
141
 
153
142
  return (
154
143
  <BarChart
155
- height={150}
156
- inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
144
+ stacked
145
+ height={400}
157
146
  series={[
158
147
  {
159
- id: 'xrp',
160
- data: [
161
- 170.22, 340.34, 305.98, 225.39, 250.76, 130.53, 115.81, 195.04, 210.28, 60.42, 120.94,
162
- 85.12,
163
- ],
164
- color: assets.xrp.color,
165
- },
166
- {
167
- id: 'ltc',
168
- data: [
169
- 450.77, 615.33, 355.68, 880.15, 810.99, 520.46, 590.29, 960.52, 910.07, 1020.41, 851.89,
170
- 750.61,
171
- ],
172
- color: assets.ltc.color,
148
+ id: 'series1',
149
+ data: [5, 1, 3, 3, 0, 2, 1],
150
+ color: `rgb(${theme.spectrum.blue40})`,
151
+ label: 'Series 1',
173
152
  },
174
153
  {
175
- id: 'eth',
176
- data: [
177
- 270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
178
- 550.93,
179
- ],
180
- color: assets.eth.color,
154
+ id: 'series2',
155
+ data: [2, 4, 6, 0, 3, 1, 2],
156
+ color: `rgb(${theme.spectrum.yellow40})`,
157
+ label: 'Series 2',
181
158
  },
182
159
  {
183
- id: 'btc',
184
- data: [
185
- 345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
186
- 620.57,
187
- ],
188
- color: assets.btc.color,
160
+ id: 'series3',
161
+ data: [1, 2, 3, 1, 0, 2, 3],
162
+ color: `rgb(${theme.spectrum.red40})`,
163
+ label: 'Series 3',
189
164
  },
190
165
  ]}
191
- stacked
166
+ legend
167
+ showXAxis
192
168
  showYAxis
169
+ xAxis={{
170
+ data: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E', 'Group F', 'Group G'],
171
+ showLine: true,
172
+ showTickMarks: true,
173
+ }}
193
174
  yAxis={{
175
+ showLine: true,
194
176
  showGrid: true,
195
- GridLineComponent: ThinSolidLine,
196
- tickLabelFormatter: tickFormatter,
197
- width: 70,
177
+ showTickMarks: true,
198
178
  }}
199
179
  />
200
180
  );
@@ -205,66 +185,60 @@ You can also configure multiple stacks by setting the `stackId` prop on each ser
205
185
 
206
186
  ```tsx
207
187
  function MonthlyGainsMultipleStacks() {
208
- const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
209
-
210
- const tickFormatter = useCallback(
211
- (amount) =>
212
- new Intl.NumberFormat('en-US', {
213
- style: 'currency',
214
- currency: 'USD',
215
- }).format(amount),
216
- [],
217
- );
188
+ const theme = useTheme();
218
189
 
219
190
  return (
220
191
  <BarChart
221
- height={150}
222
- inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
192
+ height={400}
223
193
  series={[
224
194
  {
225
- id: 'xrp',
226
- data: [
227
- 170.22, 340.34, 305.98, 225.39, 250.76, 130.53, 115.81, 195.04, 210.28, 60.42, 120.94,
228
- 85.12,
229
- ],
230
- color: assets.xrp.color,
231
- stackId: 'shortTerm',
195
+ id: 'series1',
196
+ data: [5, 1, 3],
197
+ color: `rgb(${theme.spectrum.blue40})`,
198
+ stackId: 'stack1',
199
+ },
200
+ {
201
+ id: 'series2',
202
+ data: [2, 4, 6],
203
+ color: `rgb(${theme.spectrum.yellow40})`,
204
+ stackId: 'stack1',
205
+ },
206
+ {
207
+ id: 'series3',
208
+ data: [1, 2, 3],
209
+ color: `rgb(${theme.spectrum.red40})`,
210
+ stackId: 'stack1',
232
211
  },
233
212
  {
234
- id: 'ltc',
235
- data: [
236
- 450.77, 615.33, 355.68, 880.15, 810.99, 520.46, 590.29, 960.52, 910.07, 1020.41, 851.89,
237
- 750.61,
238
- ],
239
- color: assets.ltc.color,
240
- stackId: 'shortTerm',
213
+ id: 'series4',
214
+ data: [3, 0, 2],
215
+ color: `rgb(${theme.spectrum.purple40})`,
216
+ stackId: 'stack2',
241
217
  },
242
218
  {
243
- id: 'eth',
244
- data: [
245
- 270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
246
- 550.93,
247
- ],
248
- color: assets.eth.color,
249
- stackId: 'longTerm',
219
+ id: 'series5',
220
+ data: [0, 3, 1],
221
+ color: `rgb(${theme.spectrum.teal40})`,
222
+ stackId: 'stack2',
250
223
  },
251
224
  {
252
- id: 'btc',
253
- data: [
254
- 345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
255
- 620.57,
256
- ],
257
- color: assets.btc.color,
258
- stackId: 'longTerm',
225
+ id: 'series6',
226
+ data: [1, 0, 2],
227
+ color: `rgb(${theme.spectrum.green40})`,
228
+ stackId: 'stack2',
259
229
  },
260
230
  ]}
261
- stacked
231
+ showXAxis
262
232
  showYAxis
233
+ xAxis={{
234
+ data: ['Group A', 'Group B', 'Group C'],
235
+ showLine: true,
236
+ showTickMarks: true,
237
+ }}
263
238
  yAxis={{
239
+ showLine: true,
264
240
  showGrid: true,
265
- GridLineComponent: ThinSolidLine,
266
- tickLabelFormatter: tickFormatter,
267
- width: 70,
241
+ showTickMarks: true,
268
242
  }}
269
243
  />
270
244
  );
@@ -274,65 +248,63 @@ function MonthlyGainsMultipleStacks() {
274
248
  #### Stack Gap
275
249
 
276
250
  ```tsx
277
- function MonthlyGainsByAsset() {
278
- const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
279
-
280
- const tickFormatter = useCallback(
281
- (amount) =>
282
- new Intl.NumberFormat('en-US', {
283
- style: 'currency',
284
- currency: 'USD',
285
- }).format(amount),
286
- [],
287
- );
251
+ function StackGap() {
252
+ const theme = useTheme();
288
253
 
289
254
  return (
290
255
  <BarChart
291
- height={150}
292
- inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
256
+ height={400}
293
257
  series={[
294
258
  {
295
- id: 'xrp',
296
- data: [
297
- 170.22, 340.34, 305.98, 225.39, 250.76, 130.53, 115.81, 195.04, 210.28, 60.42, 120.94,
298
- 500,
299
- ],
300
- color: assets.xrp.color,
259
+ id: 'series1',
260
+ data: [5, 1, 3],
261
+ color: `rgb(${theme.spectrum.blue40})`,
262
+ stackId: 'stack1',
263
+ },
264
+ {
265
+ id: 'series2',
266
+ data: [2, 4, 6],
267
+ color: `rgb(${theme.spectrum.yellow40})`,
268
+ stackId: 'stack1',
269
+ },
270
+ {
271
+ id: 'series3',
272
+ data: [1, 2, 3],
273
+ color: `rgb(${theme.spectrum.red40})`,
274
+ stackId: 'stack1',
301
275
  },
302
276
  {
303
- id: 'ltc',
304
- data: [
305
- 450.77, 615.33, 355.68, 880.15, 810.99, 520.46, 590.29, 960.52, 910.07, 1020.41, 851.89,
306
- 500,
307
- ],
308
- color: assets.ltc.color,
277
+ id: 'series4',
278
+ data: [3, 0, 2],
279
+ color: `rgb(${theme.spectrum.purple40})`,
280
+ stackId: 'stack2',
309
281
  },
310
282
  {
311
- id: 'eth',
312
- data: [
313
- 270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
314
- 500,
315
- ],
316
- color: assets.eth.color,
283
+ id: 'series5',
284
+ data: [0, 3, 1],
285
+ color: `rgb(${theme.spectrum.teal40})`,
286
+ stackId: 'stack2',
317
287
  },
318
288
  {
319
- id: 'btc',
320
- data: [
321
- 345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
322
- 500,
323
- ],
324
- color: assets.btc.color,
289
+ id: 'series6',
290
+ data: [1, 0, 2],
291
+ color: `rgb(${theme.spectrum.green40})`,
292
+ stackId: 'stack2',
325
293
  },
326
294
  ]}
327
295
  stackGap={4}
328
- stacked
296
+ barMinSize={8}
297
+ showXAxis
329
298
  showYAxis
299
+ xAxis={{
300
+ data: ['Group A', 'Group B', 'Group C'],
301
+ showLine: true,
302
+ showTickMarks: true,
303
+ }}
330
304
  yAxis={{
305
+ showLine: true,
331
306
  showGrid: true,
332
- GridLineComponent: ThinSolidLine,
333
- tickLabelFormatter: tickFormatter,
334
- width: 70,
335
- domainLimit: 'strict',
307
+ showTickMarks: true,
336
308
  }}
337
309
  />
338
310
  );
@@ -346,34 +318,53 @@ Bars have a default borderRadius of `4`. You can change this by setting the `bor
346
318
  Stacks will only round the top corners of touching bars.
347
319
 
348
320
  ```jsx
349
- <BarChart
350
- stacked
351
- borderRadius={1000}
352
- height={300}
353
- maxWidth={400}
354
- padding={0}
355
- series={[
356
- { id: 'purple', data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4], color: '#b399ff' },
357
- { id: 'blue', data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18], color: '#4f7cff' },
358
- { id: 'cyan', data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9], color: '#00c2df' },
359
- {
360
- id: 'green',
361
- data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
362
- color: '#33c481',
363
- },
364
- ]}
365
- showXAxis
366
- xAxis={{
367
- data: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
368
- tickLabelFormatter: (value) => {
369
- if (value === 'D') {
370
- return <Tspan style={{ fontWeight: 'bold' }}>{value}</TSpan>;
371
- }
372
- return value;
373
- },
374
- }}
375
- style={{ margin: '0 auto' }}
376
- />
321
+ function RoundedStacks() {
322
+ const theme = useTheme();
323
+
324
+ return (
325
+ <BarChart
326
+ stacked
327
+ borderRadius={1000}
328
+ height={300}
329
+ maxWidth={384}
330
+ padding={0}
331
+ series={[
332
+ {
333
+ id: 'purple',
334
+ data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4],
335
+ color: `rgb(${theme.spectrum.purple30})`,
336
+ },
337
+ {
338
+ id: 'blue',
339
+ data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18],
340
+ color: `rgb(${theme.spectrum.blue30})`,
341
+ },
342
+ {
343
+ id: 'cyan',
344
+ data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9],
345
+ color: `rgb(${theme.spectrum.teal30})`,
346
+ },
347
+ {
348
+ id: 'green',
349
+ data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
350
+ color: `rgb(${theme.spectrum.green30})`,
351
+ },
352
+ ]}
353
+ showXAxis
354
+ xAxis={{
355
+ data: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
356
+ tickLabelFormatter: (value) => {
357
+ if (value === 'D') {
358
+ return <TSpan style={{ fontWeight: 'bold' }}>{value}</TSpan>;
359
+ }
360
+ return value;
361
+ },
362
+ categoryPadding: 0.25,
363
+ }}
364
+ style={{ margin: '0 auto' }}
365
+ />
366
+ );
367
+ }
377
368
  ```
378
369
 
379
370
  #### Round Baseline
@@ -381,35 +372,56 @@ Stacks will only round the top corners of touching bars.
381
372
  You can also round the baseline of the bars by setting the `roundBaseline` prop on the chart.
382
373
 
383
374
  ```jsx
384
- <BarChart
385
- roundBaseline
386
- stacked
387
- borderRadius={1000}
388
- height={300}
389
- maxWidth={400}
390
- padding={0}
391
- series={[
392
- { id: 'purple', data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4], color: '#b399ff' },
393
- { id: 'blue', data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18], color: '#4f7cff' },
394
- { id: 'cyan', data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9], color: '#00c2df' },
395
- {
396
- id: 'green',
397
- data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
398
- color: '#33c481',
399
- },
400
- ]}
401
- showXAxis
402
- xAxis={{
403
- data: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
404
- tickLabelFormatter: (value) => {
405
- if (value === 'D') {
406
- return <TSpan style={{ fontWeight: 'bold' }}>{value}</TSpan>;
407
- }
408
- return value;
409
- },
410
- }}
411
- style={{ margin: '0 auto' }}
412
- />
375
+ function MonthlyRewards() {
376
+ const theme = useTheme();
377
+ const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
378
+
379
+ return (
380
+ <BarChart
381
+ roundBaseline
382
+ stacked
383
+ borderRadius={1000}
384
+ height={300}
385
+ maxWidth={384}
386
+ inset={0}
387
+ series={[
388
+ {
389
+ id: 'purple',
390
+ data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4],
391
+ color: `rgb(${theme.spectrum.purple30})`,
392
+ },
393
+ {
394
+ id: 'blue',
395
+ data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18],
396
+ color: `rgb(${theme.spectrum.blue30})`,
397
+ },
398
+ {
399
+ id: 'cyan',
400
+ data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9],
401
+ color: `rgb(${theme.spectrum.teal30})`,
402
+ },
403
+ {
404
+ id: 'green',
405
+ data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
406
+ color: `rgb(${theme.spectrum.green30})`,
407
+ },
408
+ ]}
409
+ showXAxis
410
+ xAxis={{
411
+ data: months,
412
+ tickLabelFormatter: (value) => {
413
+ if (value === 11) {
414
+ return <TSpan style={{ fontWeight: 'bold' }}>{months[value]}</TSpan>;
415
+ }
416
+ return months[value];
417
+ },
418
+ categoryPadding: 0.25,
419
+ }}
420
+ stackMinSize={24}
421
+ style={{ margin: '0 auto' }}
422
+ />
423
+ );
424
+ }
413
425
  ```
414
426
 
415
427
  ### Data
@@ -491,6 +503,7 @@ You can also use the `BarStackComponent` prop to render an empty circle for zero
491
503
 
492
504
  ```tsx
493
505
  function MonthlyRewards() {
506
+ const theme = useTheme();
494
507
  const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
495
508
  const currentMonth = 7;
496
509
  const purple = [null, 6, 8, 10, 7, 6, 6, 8, null, null, null, null];
@@ -499,10 +512,10 @@ function MonthlyRewards() {
499
512
  const green = [10, null, null, null, 1, null, null, 6, null, null, null, null];
500
513
 
501
514
  const series = [
502
- { id: 'purple', data: purple, color: '#b399ff' },
503
- { id: 'blue', data: blue, color: '#4f7cff' },
504
- { id: 'cyan', data: cyan, color: '#00c2df' },
505
- { id: 'green', data: green, color: '#33c481' },
515
+ { id: 'purple', data: purple, color: `rgb(${theme.spectrum.purple30})` },
516
+ { id: 'blue', data: blue, color: `rgb(${theme.spectrum.blue30})` },
517
+ { id: 'cyan', data: cyan, color: `rgb(${theme.spectrum.teal30})` },
518
+ { id: 'green', data: green, color: `rgb(${theme.spectrum.green30})` },
506
519
  ];
507
520
 
508
521
  const CustomBarStackComponent = ({ children, ...props }: BarStackComponentProps) => {
@@ -537,7 +550,7 @@ function MonthlyRewards() {
537
550
  series={series}
538
551
  showYAxis={false}
539
552
  stackMinSize={3}
540
- width={403}
553
+ width={384}
541
554
  xAxis={{
542
555
  tickLabelFormatter: (index) => {
543
556
  if (index == currentMonth) {
@@ -545,7 +558,7 @@ function MonthlyRewards() {
545
558
  }
546
559
  return months[index];
547
560
  },
548
- categoryPadding: 0.27,
561
+ categoryPadding: 0.25,
549
562
  }}
550
563
  />
551
564
  );
@@ -623,7 +636,6 @@ There are two ways to control the spacing between bars. You can set the `barPadd
623
636
  #### Minimum Size
624
637
 
625
638
  To better emphasize small values, you can set the `stackMinSize` or `barMinSize` prop to control the minimum size for entire stacks or individual bar.
626
- It is recommended to only use `stackMinSize` for stacked charts and `barMinSize` for non-stacked charts.
627
639
 
628
640
  ##### Minimum Stack Size
629
641
 
package/mcp-docs/web/components/BarChart.txt CHANGED
@@ -34,9 +34,9 @@ To start, pass in a series of data to the chart.
34
34
  />
35
35
  ```
36
36
 
37
- ### Horizontal Bars
37
+ #### Layout
38
38
 
39
- To show horizontal bars, set `layout` to `"horizontal"`. In this layout, the Y axis becomes the categorical axis and the X axis becomes the value axis.
39
+ You can set `layout` to `horizontal` to render the chart horizontally.
40
40
 
41
41
  ```jsx live
42
42
  function HorizontalBars() {
@@ -94,50 +94,27 @@ function HorizontalBars() {
94
94
  You can also provide multiple series of data to the chart. Series will have their bars for each data point rendered side by side.
95
95
 
96
96
  ```jsx live
97
- function MonthlyGainsByAsset() {
98
- const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
99
-
100
- const tickFormatter = useCallback(
101
- (amount) =>
102
- new Intl.NumberFormat('en-US', {
103
- style: 'currency',
104
- currency: 'USD',
105
- }).format(amount),
106
- [],
107
- );
108
-
109
- return (
110
- <BarChart
111
- height={{ base: 150, tablet: 200, desktop: 250 }}
112
- inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
113
- series={[
114
- {
115
- id: 'btc',
116
- data: [
117
- 345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
118
- 620.57,
119
- ],
120
- color: assets.btc.color,
121
- },
122
- {
123
- id: 'eth',
124
- data: [
125
- 270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
126
- 550.93,
127
- ],
128
- color: assets.eth.color,
129
- },
130
- ]}
131
- showYAxis
132
- yAxis={{
133
- showGrid: true,
134
- GridLineComponent: ThinSolidLine,
135
- tickLabelFormatter: tickFormatter,
136
- width: 70,
137
- }}
138
- />
139
- );
140
- }
97
+ <BarChart
98
+ height={400}
99
+ series={[
100
+ { id: 'series1', data: [5, 1, 3], color: 'rgb(var(--blue40))', label: 'Series 1' },
101
+ { id: 'series2', data: [2, 4, 6], color: 'rgb(var(--yellow40))', label: 'Series 2' },
102
+ { id: 'series3', data: [1, 2, 3], color: 'rgb(var(--red40))', label: 'Series 3' },
103
+ ]}
104
+ legend
105
+ showXAxis
106
+ showYAxis
107
+ xAxis={{
108
+ data: ['Group A', 'Group B', 'Group C'],
109
+ showLine: true,
110
+ showTickMarks: true,
111
+ }}
112
+ yAxis={{
113
+ showLine: true,
114
+ showGrid: true,
115
+ showTickMarks: true,
116
+ }}
117
+ />
141
118
  ```
142
119
 
143
120
  ### Series Stacking
@@ -145,205 +122,91 @@ function MonthlyGainsByAsset() {
145
122
  You can also configure stacking for your chart using the `stacked` prop.
146
123
 
147
124
  ```jsx live
148
- function MonthlyGainsByAsset() {
149
- const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
150
-
151
- const tickFormatter = useCallback(
152
- (amount) =>
153
- new Intl.NumberFormat('en-US', {
154
- style: 'currency',
155
- currency: 'USD',
156
- }).format(amount),
157
- [],
158
- );
159
-
160
- return (
161
- <BarChart
162
- height={{ base: 150, tablet: 200, desktop: 250 }}
163
- inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
164
- series={[
165
- {
166
- id: 'xrp',
167
- data: [
168
- 170.22, 340.34, 305.98, 225.39, 250.76, 130.53, 115.81, 195.04, 210.28, 60.42, 120.94,
169
- 85.12,
170
- ],
171
- color: assets.xrp.color,
172
- },
173
- {
174
- id: 'ltc',
175
- data: [
176
- 450.77, 615.33, 355.68, 880.15, 810.99, 520.46, 590.29, 960.52, 910.07, 1020.41, 851.89,
177
- 750.61,
178
- ],
179
- color: assets.ltc.color,
180
- },
181
- {
182
- id: 'eth',
183
- data: [
184
- 270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
185
- 550.93,
186
- ],
187
- color: assets.eth.color,
188
- },
189
- {
190
- id: 'btc',
191
- data: [
192
- 345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
193
- 620.57,
194
- ],
195
- color: assets.btc.color,
196
- },
197
- ]}
198
- stacked
199
- showYAxis
200
- yAxis={{
201
- showGrid: true,
202
- GridLineComponent: ThinSolidLine,
203
- tickLabelFormatter: tickFormatter,
204
- width: 70,
205
- }}
206
- />
207
- );
208
- }
125
+ <BarChart
126
+ stacked
127
+ height={400}
128
+ series={[
129
+ { id: 'series1', data: [5, 1, 3, 3, 0, 2, 1], color: 'rgb(var(--blue40))', label: 'Series 1' },
130
+ {
131
+ id: 'series2',
132
+ data: [2, 4, 6, 0, 3, 1, 2],
133
+ color: 'rgb(var(--yellow40))',
134
+ label: 'Series 2',
135
+ },
136
+ { id: 'series3', data: [1, 2, 3, 1, 0, 2, 3], color: 'rgb(var(--red40))', label: 'Series 3' },
137
+ ]}
138
+ legend
139
+ showXAxis
140
+ showYAxis
141
+ xAxis={{
142
+ data: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E', 'Group F', 'Group G'],
143
+ showLine: true,
144
+ showTickMarks: true,
145
+ }}
146
+ yAxis={{
147
+ showLine: true,
148
+ showGrid: true,
149
+ showTickMarks: true,
150
+ }}
151
+ />
209
152
  ```
210
153
 
211
154
  You can also configure multiple stacks by setting the `stackId` prop on each series.
212
155
 
213
156
  ```jsx live
214
- function MonthlyGainsMultipleStacks() {
215
- const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
216
-
217
- const tickFormatter = useCallback(
218
- (amount) =>
219
- new Intl.NumberFormat('en-US', {
220
- style: 'currency',
221
- currency: 'USD',
222
- }).format(amount),
223
- [],
224
- );
225
-
226
- return (
227
- <BarChart
228
- height={{ base: 150, tablet: 200, desktop: 250 }}
229
- inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
230
- series={[
231
- {
232
- id: 'xrp',
233
- data: [
234
- 170.22, 340.34, 305.98, 225.39, 250.76, 130.53, 115.81, 195.04, 210.28, 60.42, 120.94,
235
- 85.12,
236
- ],
237
- color: assets.xrp.color,
238
- stackId: 'shortTerm',
239
- },
240
- {
241
- id: 'ltc',
242
- data: [
243
- 450.77, 615.33, 355.68, 880.15, 810.99, 520.46, 590.29, 960.52, 910.07, 1020.41, 851.89,
244
- 750.61,
245
- ],
246
- color: assets.ltc.color,
247
- stackId: 'shortTerm',
248
- },
249
- {
250
- id: 'eth',
251
- data: [
252
- 270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
253
- 550.93,
254
- ],
255
- color: assets.eth.color,
256
- stackId: 'longTerm',
257
- },
258
- {
259
- id: 'btc',
260
- data: [
261
- 345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
262
- 620.57,
263
- ],
264
- color: assets.btc.color,
265
- stackId: 'longTerm',
266
- },
267
- ]}
268
- stacked
269
- showYAxis
270
- yAxis={{
271
- showGrid: true,
272
- GridLineComponent: ThinSolidLine,
273
- tickLabelFormatter: tickFormatter,
274
- width: 70,
275
- }}
276
- />
277
- );
278
- }
157
+ <BarChart
158
+ height={400}
159
+ series={[
160
+ { id: 'series1', data: [5, 1, 3], color: 'rgb(var(--blue40))', stackId: 'stack1' },
161
+ { id: 'series2', data: [2, 4, 6], color: 'rgb(var(--yellow40))', stackId: 'stack1' },
162
+ { id: 'series3', data: [1, 2, 3], color: 'rgb(var(--red40))', stackId: 'stack1' },
163
+ { id: 'series4', data: [3, 0, 2], color: 'rgb(var(--purple40))', stackId: 'stack2' },
164
+ { id: 'series5', data: [0, 3, 1], color: 'rgb(var(--teal40))', stackId: 'stack2' },
165
+ { id: 'series6', data: [1, 0, 2], color: 'rgb(var(--green40))', stackId: 'stack2' },
166
+ ]}
167
+ showXAxis
168
+ showYAxis
169
+ xAxis={{
170
+ data: ['Group A', 'Group B', 'Group C'],
171
+ showLine: true,
172
+ showTickMarks: true,
173
+ }}
174
+ yAxis={{
175
+ showLine: true,
176
+ showGrid: true,
177
+ showTickMarks: true,
178
+ }}
179
+ />
279
180
  ```
280
181
 
281
182
  #### Stack Gap
282
183
 
283
184
  ```jsx live
284
- function MonthlyGainsByAsset() {
285
- const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
286
-
287
- const tickFormatter = useCallback(
288
- (amount) =>
289
- new Intl.NumberFormat('en-US', {
290
- style: 'currency',
291
- currency: 'USD',
292
- }).format(amount),
293
- [],
294
- );
295
-
296
- return (
297
- <BarChart
298
- height={{ base: 150, tablet: 200, desktop: 250 }}
299
- inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
300
- series={[
301
- {
302
- id: 'xrp',
303
- data: [
304
- 170.22, 340.34, 305.98, 225.39, 250.76, 130.53, 115.81, 195.04, 210.28, 60.42, 120.94,
305
- 500,
306
- ],
307
- color: assets.xrp.color,
308
- },
309
- {
310
- id: 'ltc',
311
- data: [
312
- 450.77, 615.33, 355.68, 880.15, 810.99, 520.46, 590.29, 960.52, 910.07, 1020.41, 851.89,
313
- 500,
314
- ],
315
- color: assets.ltc.color,
316
- },
317
- {
318
- id: 'eth',
319
- data: [
320
- 270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
321
- 500,
322
- ],
323
- color: assets.eth.color,
324
- },
325
- {
326
- id: 'btc',
327
- data: [
328
- 345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
329
- 500,
330
- ],
331
- color: assets.btc.color,
332
- },
333
- ]}
334
- stackGap={4}
335
- stacked
336
- showYAxis
337
- yAxis={{
338
- showGrid: true,
339
- GridLineComponent: ThinSolidLine,
340
- tickLabelFormatter: tickFormatter,
341
- width: 70,
342
- domainLimit: 'strict',
343
- }}
344
- />
345
- );
346
- }
185
+ <BarChart
186
+ height={400}
187
+ series={[
188
+ { id: 'series1', data: [5, 1, 3], color: 'rgb(var(--blue40))', stackId: 'stack1' },
189
+ { id: 'series2', data: [2, 4, 6], color: 'rgb(var(--yellow40))', stackId: 'stack1' },
190
+ { id: 'series3', data: [1, 2, 3], color: 'rgb(var(--red40))', stackId: 'stack1' },
191
+ { id: 'series4', data: [3, 0, 2], color: 'rgb(var(--purple40))', stackId: 'stack2' },
192
+ { id: 'series5', data: [0, 3, 1], color: 'rgb(var(--teal40))', stackId: 'stack2' },
193
+ { id: 'series6', data: [1, 0, 2], color: 'rgb(var(--green40))', stackId: 'stack2' },
194
+ ]}
195
+ stackGap={4}
196
+ barMinSize={8}
197
+ showXAxis
198
+ showYAxis
199
+ xAxis={{
200
+ data: ['Group A', 'Group B', 'Group C'],
201
+ showLine: true,
202
+ showTickMarks: true,
203
+ }}
204
+ yAxis={{
205
+ showLine: true,
206
+ showGrid: true,
207
+ showTickMarks: true,
208
+ }}
209
+ />
347
210
  ```
348
211
 
349
212
  ### Border Radius
@@ -357,16 +220,28 @@ Stacks will only round the top corners of touching bars.
357
220
  stacked
358
221
  borderRadius={1000}
359
222
  height={300}
360
- maxWidth={400}
223
+ maxWidth={384}
361
224
  padding={0}
362
225
  series={[
363
- { id: 'purple', data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4], color: '#b399ff' },
364
- { id: 'blue', data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18], color: '#4f7cff' },
365
- { id: 'cyan', data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9], color: '#00c2df' },
226
+ {
227
+ id: 'purple',
228
+ data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4],
229
+ color: 'rgb(var(--purple30))',
230
+ },
231
+ {
232
+ id: 'blue',
233
+ data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18],
234
+ color: 'rgb(var(--blue30))',
235
+ },
236
+ {
237
+ id: 'cyan',
238
+ data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9],
239
+ color: 'rgb(var(--teal30))',
240
+ },
366
241
  {
367
242
  id: 'green',
368
243
  data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
369
- color: '#33c481',
244
+ color: 'rgb(var(--green30))',
370
245
  },
371
246
  ]}
372
247
  showXAxis
@@ -378,6 +253,7 @@ Stacks will only round the top corners of touching bars.
378
253
  }
379
254
  return value;
380
255
  },
256
+ categoryPadding: 0.25,
381
257
  }}
382
258
  style={{ margin: '0 auto' }}
383
259
  />
@@ -388,35 +264,55 @@ Stacks will only round the top corners of touching bars.
388
264
  You can also round the baseline of the bars by setting the `roundBaseline` prop on the chart.
389
265
 
390
266
  ```jsx live
391
- <BarChart
392
- roundBaseline
393
- stacked
394
- borderRadius={1000}
395
- height={300}
396
- maxWidth={400}
397
- padding={0}
398
- series={[
399
- { id: 'purple', data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4], color: '#b399ff' },
400
- { id: 'blue', data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18], color: '#4f7cff' },
401
- { id: 'cyan', data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9], color: '#00c2df' },
402
- {
403
- id: 'green',
404
- data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
405
- color: '#33c481',
406
- },
407
- ]}
408
- showXAxis
409
- xAxis={{
410
- data: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
411
- tickLabelFormatter: (value) => {
412
- if (value === 'D') {
413
- return <tspan style={{ fontWeight: 'bold' }}>{value}</tspan>;
414
- }
415
- return value;
416
- },
417
- }}
418
- style={{ margin: '0 auto' }}
419
- />
267
+ function MonthlyRewards() {
268
+ const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
269
+
270
+ return (
271
+ <BarChart
272
+ roundBaseline
273
+ stacked
274
+ borderRadius={1000}
275
+ height={300}
276
+ maxWidth={384}
277
+ inset={0}
278
+ series={[
279
+ {
280
+ id: 'purple',
281
+ data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4],
282
+ color: 'rgb(var(--purple30))',
283
+ },
284
+ {
285
+ id: 'blue',
286
+ data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18],
287
+ color: 'rgb(var(--blue30))',
288
+ },
289
+ {
290
+ id: 'cyan',
291
+ data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9],
292
+ color: 'rgb(var(--teal30))',
293
+ },
294
+ {
295
+ id: 'green',
296
+ data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
297
+ color: 'rgb(var(--green30))',
298
+ },
299
+ ]}
300
+ showXAxis
301
+ xAxis={{
302
+ data: months,
303
+ tickLabelFormatter: (value) => {
304
+ if (value === 11) {
305
+ return <tspan style={{ fontWeight: 'bold' }}>{months[value]}</tspan>;
306
+ }
307
+ return months[value];
308
+ },
309
+ categoryPadding: 0.25,
310
+ }}
311
+ stackMinSize={24}
312
+ style={{ margin: '0 auto' }}
313
+ />
314
+ );
315
+ }
420
316
  ```
421
317
 
422
318
  ### Data
@@ -506,10 +402,10 @@ function MonthlyRewards() {
506
402
  const green = [10, null, null, null, 1, null, null, 6, null, null, null, null];
507
403
 
508
404
  const series = [
509
- { id: 'purple', data: purple, color: '#b399ff' },
510
- { id: 'blue', data: blue, color: '#4f7cff' },
511
- { id: 'cyan', data: cyan, color: '#00c2df' },
512
- { id: 'green', data: green, color: '#33c481' },
405
+ { id: 'purple', data: purple, color: 'rgb(var(--purple30))' },
406
+ { id: 'blue', data: blue, color: 'rgb(var(--blue30))' },
407
+ { id: 'cyan', data: cyan, color: 'rgb(var(--teal30))' },
408
+ { id: 'green', data: green, color: 'rgb(var(--green30))' },
513
409
  ];
514
410
 
515
411
  const CustomBarStackComponent = ({ children, ...props }) => {
@@ -544,7 +440,7 @@ function MonthlyRewards() {
544
440
  series={series}
545
441
  showYAxis={false}
546
442
  stackMinSize={3}
547
- width={403}
443
+ width={384}
548
444
  xAxis={{
549
445
  tickLabelFormatter: (index) => {
550
446
  if (index == currentMonth) {
@@ -552,7 +448,7 @@ function MonthlyRewards() {
552
448
  }
553
449
  return months[index];
554
450
  },
555
- categoryPadding: 0.27,
451
+ categoryPadding: 0.25,
556
452
  }}
557
453
  />
558
454
  );
@@ -630,7 +526,6 @@ There are two ways to control the spacing between bars. You can set the `barPadd
630
526
  #### Minimum Size
631
527
 
632
528
  To better emphasize small values, you can set the `stackMinSize` or `barMinSize` prop to control the minimum size for entire stacks or individual bar.
633
- It is recommended to only use `stackMinSize` for stacked charts and `barMinSize` for non-stacked charts.
634
529
 
635
530
  ##### Minimum Stack Size
636
531
 
@@ -857,16 +752,28 @@ function MonthlyRewards() {
857
752
  BarStackComponent={CustomBarStackComponent}
858
753
  borderRadius={1000}
859
754
  height={300}
860
- maxWidth={400}
755
+ maxWidth={384}
861
756
  padding={0}
862
757
  series={[
863
- { id: 'purple', data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4], color: '#b399ff' },
864
- { id: 'blue', data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18], color: '#4f7cff' },
865
- { id: 'cyan', data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9], color: '#00c2df' },
758
+ {
759
+ id: 'purple',
760
+ data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4],
761
+ color: 'rgb(var(--purple30))',
762
+ },
763
+ {
764
+ id: 'blue',
765
+ data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18],
766
+ color: 'rgb(var(--blue30))',
767
+ },
768
+ {
769
+ id: 'cyan',
770
+ data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9],
771
+ color: 'rgb(var(--teal30))',
772
+ },
866
773
  {
867
774
  id: 'green',
868
775
  data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
869
- color: '#33c481',
776
+ color: 'rgb(var(--green30))',
870
777
  },
871
778
  ]}
872
779
  showXAxis
@@ -878,6 +785,7 @@ function MonthlyRewards() {
878
785
  }
879
786
  return value;
880
787
  },
788
+ categoryPadding: 0.25,
881
789
  }}
882
790
  yAxis={{ range: ({ min, max }) => ({ min, max: max - 4 }) }}
883
791
  style={{ margin: '0 auto' }}
@@ -1340,7 +1248,7 @@ function BuyVsSellExample() {
1340
1248
  function BuyVsSellChart({
1341
1249
  buy,
1342
1250
  sell,
1343
- animate = false,
1251
+ animate = true,
1344
1252
  borderRadius = 3,
1345
1253
  height = 6,
1346
1254
  inset = 0,
@@ -1348,6 +1256,7 @@ function BuyVsSellExample() {
1348
1256
  stackGap = 4,
1349
1257
  xAxis,
1350
1258
  yAxis,
1259
+ barMinSize = height,
1351
1260
  ...props
1352
1261
  }: Omit<BarChartProps, 'series'> & { buy: number; sell: number }) {
1353
1262
  return (
@@ -1356,6 +1265,7 @@ function BuyVsSellExample() {
1356
1265
  animate={animate}
1357
1266
  roundBaseline
1358
1267
  stacked
1268
+ barMinSize={barMinSize}
1359
1269
  borderRadius={borderRadius}
1360
1270
  height={height}
1361
1271
  inset={inset}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mcp-server",
3
- "version": "8.57.0",
3
+ "version": "8.57.1",
4
4
  "description": "Coinbase Design System - MCP Server",
5
5
  "repository": {
6
6
  "type": "git",