@spectrum-charts/mcp 1.27.0 → 1.29.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 (2) hide show
  1. package/dist/docs-data.json +58 -0
  2. package/package.json +1 -1
package/dist/docs-data.json CHANGED
@@ -1,4 +1,62 @@
1
1
  [
2
+ {
3
+ "id": "api/alpha/Bullet",
4
+ "relPath": "api/alpha/Bullet.md",
5
+ "title": "Bullet",
6
+ "description": ":::caution Alpha Component Bullet is an **alpha component** and may undergo breaking changes. See [Alpha Components](./index.md) for more information. :::",
7
+ "sections": [
8
+ {
9
+ "title": "Basic Usage",
10
+ "level": 2,
11
+ "content": "## Basic Usage\n\n```jsx\nimport { Bullet } from '@adobe/react-spectrum-charts/alpha';\n\n<Chart data={data}>\n <Bullet\n dimension=\"category\"\n metric=\"current\"\n target=\"goal\"\n />\n</Chart>\n```"
12
+ },
13
+ {
14
+ "title": "Props",
15
+ "level": 2,
16
+ "content": "## Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>color</td>\n <td>string</td>\n <td>'categorical-100'</td>\n <td>The key in the data that is used as the color facet, or a color value.</td>\n </tr>\n <tr>\n <td>dimension</td>\n <td>string</td>\n <td>'category'</td>\n <td>Data field that the metric is trended against (x-axis for horizontal orientation).</td>\n </tr>\n <tr>\n <td>direction</td>\n <td>'row' | 'column'</td>\n <td>'column'</td>\n <td>Specifies the direction the bars should be ordered (row/column).</td>\n </tr>\n <tr>\n <td>labelPosition</td>\n <td>'side' | 'top'</td>\n <td>'top'</td>\n <td>Specifies if the labels should be on top of the bullet chart or to the side. Side labels are not supported in row mode.</td>\n </tr>\n <tr>\n <td>maxScaleValue</td>\n <td>number</td>\n <td>–</td>\n <td>Maximum value for the scale. This value must be greater than zero.</td>\n </tr>\n <tr>\n <td>metric</td>\n <td>string</td>\n <td>'value'</td>\n <td>Key in the data that is used as the metric.</td>\n </tr>\n <tr>\n <td>metricLabel</td>\n <td>string</td>\n <td>–</td>\n <td>Key in the data that contains a pre-formatted label for the metric value. When provided, this formatted label will be displayed instead of applying numberFormat to the metric value.</td>\n </tr>\n <tr>\n <td>metricAxis</td>\n <td>boolean</td>\n <td>false</td>\n <td>Adds an axis that follows the max target in basic mode.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Sets the name of the component.</td>\n </tr>\n <tr>\n <td>numberFormat</td>\n <td>string</td>\n <td>'standardNumber'</td>\n <td>d3 number format specifier or shorthand ('currency', 'shortCurrency', 'shortNumber', 'standardNumber'). Sets the number format for the summary value. See <a href=\"https://d3js.org/d3-format#locale_format\">d3-format</a>.</td>\n </tr>\n <tr>\n <td>scaleType</td>\n <td>'normal' | 'fixed' | 'flexible'</td>\n <td>'normal'</td>\n <td>\n In normal mode the maximum scale value will be calculated using the maximum value of the metric and target data fields.<br/><br/>\n In fixed mode the maximum scale value will be set as the maxScaleValue prop.<br/><br/>\n In flexible mode the maximum scale value will be calculated using the maximum value of either the maxScaleValue prop or maximum value of the metric and target data fields.\n </td>\n </tr>\n <tr>\n <td>showTarget</td>\n <td>boolean</td>\n <td>true</td>\n <td>Flag to control whether the target line is shown.</td>\n </tr>\n <tr>\n <td>showTargetValue</td>\n <td>boolean</td>\n <td>false</td>\n <td>Flag to control whether the target value label is shown.</td>\n </tr>\n <tr>\n <td>target</td>\n <td>string</td>\n <td>'target'</td>\n <td>Key in the data for the target line value.</td>\n </tr>\n <tr>\n <td>targetLabel</td>\n <td>string</td>\n <td>–</td>\n <td>Key in the data that contains a pre-formatted label for the target value. When provided, this formatted label will be displayed instead of applying numberFormat to the target value.</td>\n </tr>\n <tr>\n <td>thresholdBarColor</td>\n <td>boolean</td>\n <td>false</td>\n <td>If true, the metric bar will be colored according to the thresholds.</td>\n </tr>\n <tr>\n <td>thresholds</td>\n <td>ThresholdBackground[]</td>\n <td>–</td>\n <td>\n Array of threshold definitions to be rendered as background bands on the bullet chart.<br/>\n Each threshold object supports:<br/>\n • <code>thresholdMin</code> (optional): The lower bound of the threshold<br/>\n • <code>thresholdMax</code> (optional): The upper bound of the threshold<br/>\n • <code>fill</code>: The fill color to use for the threshold background\n </td>\n </tr>\n <tr>\n <td>track</td>\n <td>boolean</td>\n <td>false</td>\n <td>Adds color regions that sit behind the bullet bar.</td>\n </tr>\n </tbody>\n</table>"
17
+ },
18
+ {
19
+ "title": "Custom Label Formatting",
20
+ "level": 2,
21
+ "content": "## Custom Label Formatting\n\nThe `metricLabel` and `targetLabel` props allow you to provide pre-formatted labels in your data, giving you complete control over label formatting including custom units, localization, or annotations."
22
+ },
23
+ {
24
+ "title": "Example with Custom Labels",
25
+ "level": 3,
26
+ "content": "### Example with Custom Labels\n\n```jsx\nconst data = [\n {\n category: 'Storage Used',\n current: 750,\n currentLabel: '750 GB',\n goal: 1000,\n goalLabel: '1 TB',\n },\n {\n category: 'API Requests',\n current: 850,\n currentLabel: '85K req/sec',\n goal: 1000,\n goalLabel: '100K req/sec',\n },\n];\n\n<Chart data={data}>\n <Bullet\n dimension=\"category\"\n metric=\"current\"\n metricLabel=\"currentLabel\"\n target=\"goal\"\n targetLabel=\"goalLabel\"\n />\n</Chart>\n```\n\nThis is useful when you need:\n- Custom units that aren't in standard number formats\n- Localized formatting from external libraries\n- Context-specific annotations\n- Different formatting per data point"
27
+ },
28
+ {
29
+ "title": "Thresholds",
30
+ "level": 2,
31
+ "content": "## Thresholds\n\nThresholds create colored background regions to indicate performance zones:\n\n```jsx\nconst thresholds = [\n { thresholdMax: 600, fill: 'rgb(21, 164, 110)' }, // green\n { thresholdMin: 600, thresholdMax: 900, fill: 'rgb(249, 137, 23)' }, // orange\n { thresholdMin: 900, fill: 'rgb(234, 56, 41)' }, // red\n];\n\n<Chart data={data}>\n <Bullet\n dimension=\"category\"\n metric=\"current\"\n target=\"goal\"\n thresholds={thresholds}\n thresholdBarColor={true}\n />\n</Chart>\n```\n\nWhen `thresholdBarColor` is enabled, the bullet bar itself will be colored based on which threshold zone it falls into."
32
+ }
33
+ ],
34
+ "content": "# Bullet\n\n:::caution Alpha Component\nBullet is an **alpha component** and may undergo breaking changes. See [Alpha Components](./index.md) for more information.\n:::\n\n## Basic Usage\n\n```jsx\nimport { Bullet } from '@adobe/react-spectrum-charts/alpha';\n\n<Chart data={data}>\n <Bullet\n dimension=\"category\"\n metric=\"current\"\n target=\"goal\"\n />\n</Chart>\n```\n\n## Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>color</td>\n <td>string</td>\n <td>'categorical-100'</td>\n <td>The key in the data that is used as the color facet, or a color value.</td>\n </tr>\n <tr>\n <td>dimension</td>\n <td>string</td>\n <td>'category'</td>\n <td>Data field that the metric is trended against (x-axis for horizontal orientation).</td>\n </tr>\n <tr>\n <td>direction</td>\n <td>'row' | 'column'</td>\n <td>'column'</td>\n <td>Specifies the direction the bars should be ordered (row/column).</td>\n </tr>\n <tr>\n <td>labelPosition</td>\n <td>'side' | 'top'</td>\n <td>'top'</td>\n <td>Specifies if the labels should be on top of the bullet chart or to the side. Side labels are not supported in row mode.</td>\n </tr>\n <tr>\n <td>maxScaleValue</td>\n <td>number</td>\n <td>–</td>\n <td>Maximum value for the scale. This value must be greater than zero.</td>\n </tr>\n <tr>\n <td>metric</td>\n <td>string</td>\n <td>'value'</td>\n <td>Key in the data that is used as the metric.</td>\n </tr>\n <tr>\n <td>metricLabel</td>\n <td>string</td>\n <td>–</td>\n <td>Key in the data that contains a pre-formatted label for the metric value. When provided, this formatted label will be displayed instead of applying numberFormat to the metric value.</td>\n </tr>\n <tr>\n <td>metricAxis</td>\n <td>boolean</td>\n <td>false</td>\n <td>Adds an axis that follows the max target in basic mode.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Sets the name of the component.</td>\n </tr>\n <tr>\n <td>numberFormat</td>\n <td>string</td>\n <td>'standardNumber'</td>\n <td>d3 number format specifier or shorthand ('currency', 'shortCurrency', 'shortNumber', 'standardNumber'). Sets the number format for the summary value. See <a href=\"https://d3js.org/d3-format#locale_format\">d3-format</a>.</td>\n </tr>\n <tr>\n <td>scaleType</td>\n <td>'normal' | 'fixed' | 'flexible'</td>\n <td>'normal'</td>\n <td>\n In normal mode the maximum scale value will be calculated using the maximum value of the metric and target data fields.<br/><br/>\n In fixed mode the maximum scale value will be set as the maxScaleValue prop.<br/><br/>\n In flexible mode the maximum scale value will be calculated using the maximum value of either the maxScaleValue prop or maximum value of the metric and target data fields.\n </td>\n </tr>\n <tr>\n <td>showTarget</td>\n <td>boolean</td>\n <td>true</td>\n <td>Flag to control whether the target line is shown.</td>\n </tr>\n <tr>\n <td>showTargetValue</td>\n <td>boolean</td>\n <td>false</td>\n <td>Flag to control whether the target value label is shown.</td>\n </tr>\n <tr>\n <td>target</td>\n <td>string</td>\n <td>'target'</td>\n <td>Key in the data for the target line value.</td>\n </tr>\n <tr>\n <td>targetLabel</td>\n <td>string</td>\n <td>–</td>\n <td>Key in the data that contains a pre-formatted label for the target value. When provided, this formatted label will be displayed instead of applying numberFormat to the target value.</td>\n </tr>\n <tr>\n <td>thresholdBarColor</td>\n <td>boolean</td>\n <td>false</td>\n <td>If true, the metric bar will be colored according to the thresholds.</td>\n </tr>\n <tr>\n <td>thresholds</td>\n <td>ThresholdBackground[]</td>\n <td>–</td>\n <td>\n Array of threshold definitions to be rendered as background bands on the bullet chart.<br/>\n Each threshold object supports:<br/>\n • <code>thresholdMin</code> (optional): The lower bound of the threshold<br/>\n • <code>thresholdMax</code> (optional): The upper bound of the threshold<br/>\n • <code>fill</code>: The fill color to use for the threshold background\n </td>\n </tr>\n <tr>\n <td>track</td>\n <td>boolean</td>\n <td>false</td>\n <td>Adds color regions that sit behind the bullet bar.</td>\n </tr>\n </tbody>\n</table>\n\n## Custom Label Formatting\n\nThe `metricLabel` and `targetLabel` props allow you to provide pre-formatted labels in your data, giving you complete control over label formatting including custom units, localization, or annotations.\n\n### Example with Custom Labels\n\n```jsx\nconst data = [\n {\n category: 'Storage Used',\n current: 750,\n currentLabel: '750 GB',\n goal: 1000,\n goalLabel: '1 TB',\n },\n {\n category: 'API Requests',\n current: 850,\n currentLabel: '85K req/sec',\n goal: 1000,\n goalLabel: '100K req/sec',\n },\n];\n\n<Chart data={data}>\n <Bullet\n dimension=\"category\"\n metric=\"current\"\n metricLabel=\"currentLabel\"\n target=\"goal\"\n targetLabel=\"goalLabel\"\n />\n</Chart>\n```\n\nThis is useful when you need:\n- Custom units that aren't in standard number formats\n- Localized formatting from external libraries\n- Context-specific annotations\n- Different formatting per data point\n\n## Thresholds\n\nThresholds create colored background regions to indicate performance zones:\n\n```jsx\nconst thresholds = [\n { thresholdMax: 600, fill: 'rgb(21, 164, 110)' }, // green\n { thresholdMin: 600, thresholdMax: 900, fill: 'rgb(249, 137, 23)' }, // orange\n { thresholdMin: 900, fill: 'rgb(234, 56, 41)' }, // red\n];\n\n<Chart data={data}>\n <Bullet\n dimension=\"category\"\n metric=\"current\"\n target=\"goal\"\n thresholds={thresholds}\n thresholdBarColor={true}\n />\n</Chart>\n```\n\nWhen `thresholdBarColor` is enabled, the bullet bar itself will be colored based on which threshold zone it falls into.\n\n"
35
+ },
36
+ {
37
+ "id": "api/alpha/index",
38
+ "relPath": "api/alpha/index.md",
39
+ "title": "Alpha Components",
40
+ "description": "Alpha components are experimental features that are under active development. They are available for testing and feedback but may undergo significant changes before reaching stable release.",
41
+ "sections": [
42
+ {
43
+ "title": "Current Alpha Components",
44
+ "level": 2,
45
+ "content": "## Current Alpha Components\n\n- [Bullet](./Bullet.md) - Bullet charts for displaying KPI progress against targets"
46
+ },
47
+ {
48
+ "title": "Importing Alpha Components",
49
+ "level": 2,
50
+ "content": "## Importing Alpha Components\n\nAlpha components are imported from a separate `alpha` export:\n\n```jsx\nimport { Bullet } from '@adobe/react-spectrum-charts/alpha';\n```"
51
+ },
52
+ {
53
+ "title": "Providing Feedback",
54
+ "level": 2,
55
+ "content": "## Providing Feedback\n\nIf you use alpha components and have feedback, please:\n- Open an issue on GitHub\n- Share your use case and requirements\n- Report any bugs or unexpected behavior\n\nYour feedback helps shape these components for stable release."
56
+ }
57
+ ],
58
+ "content": "# Alpha Components\n\nAlpha components are experimental features that are under active development. They are available for testing and feedback but may undergo significant changes before reaching stable release.\n\nAlpha components:\n- **Are functional** but may have incomplete features or edge cases\n- **May have breaking API changes** in future releases without following semver\n- **Are open for feedback** - please report issues or suggest improvements\n\n## Current Alpha Components\n\n- [Bullet](./Bullet.md) - Bullet charts for displaying KPI progress against targets\n\n## Importing Alpha Components\n\nAlpha components are imported from a separate `alpha` export:\n\n```jsx\nimport { Bullet } from '@adobe/react-spectrum-charts/alpha';\n```\n\n## Providing Feedback\n\nIf you use alpha components and have feedback, please:\n- Open an issue on GitHub\n- Share your use case and requirements\n- Report any bugs or unexpected behavior\n\nYour feedback helps shape these components for stable release.\n\n"
59
+ },
2
60
  {
3
61
  "id": "api/analysis/MetricRange",
4
62
  "relPath": "api/analysis/MetricRange.md",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-charts/mcp",
3
- "version": "1.27.0",
3
+ "version": "1.29.0",
4
4
  "description": "MCP Server for React Spectrum Charts documentation",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",