@spectrum-charts/mcp 1.29.0 → 1.30.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.
- package/dist/docs-data.json +2 -2
- package/package.json +1 -1
package/dist/docs-data.json
CHANGED
|
@@ -754,7 +754,7 @@
|
|
|
754
754
|
{
|
|
755
755
|
"title": "Props",
|
|
756
756
|
"level": 3,
|
|
757
|
-
"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>children</td>\n <td>ChartTooltip | ChartPopover | MetricRange | Trendline</td>\n <td>–</td>\n <td>Optional elements that can be rendered within the chart. Use these to add tooltips, popovers, metric ranges, or trendlines to your line chart.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>string</td>\n <td>'series'</td>\n <td>The key in the data that defines what color that line will be. This is not a color value itself but rather the key in the data that will map to the colors scale.<br/>For example: A line chart that has a different line and color for each operating system, `color` would be set to the name of the key in the data that defines which operating system it is (color=\"operatingSystem\").</td>\n </tr>\n <tr>\n <td>dimension</td>\n <td>string</td>\n <td>'datetime'</td>\n <td>The key in the data that the metric is trended against. This is the x-axis for a standard line chart.</td>\n </tr>\n <tr>\n <td>lineType</td>\n <td>string | \\{value: LineType | number[]}</td>\n <td>–</td>\n <td>If a string is provided, this string is the key in the data that lines will be grouped into series by. Each unique value for this key in the provided data will map to a line type from the lineTypes scale. <br/>If an object is provided with format `{value: 'solid' | 'dashed' | 'dotted' | number[]}`, this will set the line type for all lines.</td>\n </tr>\n <tr>\n <td>metric</td>\n <td>string</td>\n <td>'value'</td>\n <td>The key in the data that is used for the value of the data point.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Line name. Useful for if you need to traverse the chart object to find this line.</td>\n </tr>\n <tr>\n <td>onClick</td>\n <td>(event: MouseEvent, data: any) => void</td>\n <td>–</td>\n <td>Callback function that will be executed when a point or section of the line is clicked. Receives the mouse event and the data point as arguments.</td>\n </tr>\n <tr>\n <td>padding</td>\n <td>number</td>\n <td>–</td>\n <td>Sets the chart area padding. This is a ratio from 0 to 1 for categorical scales (point) and a pixel value for continuous scales (time, linear)</td>\n </tr>\n <tr>\n <td>scaleType</td>\n <td>'linear' | 'time' | 'point'</td>\n <td>'time'</td>\n <td>Type of data that the line is trended over. If using 'time', the dimension data must be in milliseconds since Jan 1, 1970 UTC (<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#the_ecmascript_epoch_and_timestamps\">epoch time</a>).<br/>If you are plotting this line along with other marks that are ordinal (ex. bar), then you must use a 'point' scale for the two to line up correctly.</td>\n </tr>\n <tr>\n <td>staticPoint</td>\n <td>string</td>\n <td>–</td>\n <td>Key in the data that if it exists and its value is true, a visible point will be shown on the line for that data item.</td>\n </tr>\n </tbody>\n</table>"
|
|
757
|
+
"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>children</td>\n <td>ChartTooltip | ChartPopover | MetricRange | Trendline</td>\n <td>–</td>\n <td>Optional elements that can be rendered within the chart. Use these to add tooltips, popovers, metric ranges, or trendlines to your line chart.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>string</td>\n <td>'series'</td>\n <td>The key in the data that defines what color that line will be. This is not a color value itself but rather the key in the data that will map to the colors scale.<br/>For example: A line chart that has a different line and color for each operating system, `color` would be set to the name of the key in the data that defines which operating system it is (color=\"operatingSystem\").</td>\n </tr>\n <tr>\n <td>dimension</td>\n <td>string</td>\n <td>'datetime'</td>\n <td>The key in the data that the metric is trended against. This is the x-axis for a standard line chart.</td>\n </tr>\n <tr>\n <td>lineType</td>\n <td>string | \\{value: LineType | number[]}</td>\n <td>–</td>\n <td>If a string is provided, this string is the key in the data that lines will be grouped into series by. Each unique value for this key in the provided data will map to a line type from the lineTypes scale. <br/>If an object is provided with format `{value: 'solid' | 'dashed' | 'dotted' | number[]}`, this will set the line type for all lines.</td>\n </tr>\n <tr>\n <td>metric</td>\n <td>string</td>\n <td>'value'</td>\n <td>The key in the data that is used for the value of the data point.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Line name. Useful for if you need to traverse the chart object to find this line.</td>\n </tr>\n <tr>\n <td>onClick</td>\n <td>(event: MouseEvent, data: any) => void</td>\n <td>–</td>\n <td>Callback function that will be executed when a point or section of the line is clicked. Receives the mouse event and the data point as arguments.</td>\n </tr>\n <tr>\n <td>onMouseOver</td>\n <td>function</td>\n <td>–</td>\n <td>Callback function that will be executed when a point or section of the line is hovered.</td>\n </tr>\n <tr>\n <td>onMouseOut</td>\n <td>function</td>\n <td>–</td>\n <td>Callback function that will be executed when a point or section of the line is no longer hovered.</td>\n </tr>\n <tr>\n <td>padding</td>\n <td>number</td>\n <td>–</td>\n <td>Sets the chart area padding. This is a ratio from 0 to 1 for categorical scales (point) and a pixel value for continuous scales (time, linear)</td>\n </tr>\n <tr>\n <td>scaleType</td>\n <td>'linear' | 'time' | 'point'</td>\n <td>'time'</td>\n <td>Type of data that the line is trended over. If using 'time', the dimension data must be in milliseconds since Jan 1, 1970 UTC (<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#the_ecmascript_epoch_and_timestamps\">epoch time</a>).<br/>If you are plotting this line along with other marks that are ordinal (ex. bar), then you must use a 'point' scale for the two to line up correctly.</td>\n </tr>\n <tr>\n <td>staticPoint</td>\n <td>string</td>\n <td>–</td>\n <td>Key in the data that if it exists and its value is true, a visible point will be shown on the line for that data item.</td>\n </tr>\n </tbody>\n</table>"
|
|
758
758
|
},
|
|
759
759
|
{
|
|
760
760
|
"title": "Best Practices",
|
|
@@ -767,7 +767,7 @@
|
|
|
767
767
|
"content": "### Accessibility\n\nThe Line component follows accessibility best practices:\n\n- Uses semantic SVG elements for better screen reader support\n- Supports keyboard navigation when interactive elements are added\n- Color combinations should meet WCAG contrast requirements"
|
|
768
768
|
}
|
|
769
769
|
],
|
|
770
|
-
"content": "The `Line` component is used to display line charts. You can specify the type of data that the line is being trended over with the `scaleType` prop. You can add `Trendline`s and `MetricRanges` as children to show trends in your data or include a ranged area of data in addition to the line. It's also possible to define tooltips and on-click popovers for the line using the `ChartTooltip` and `ChartPopover` components respectively as children.\n\n### Examples\n\n#### Basic Line Chart\n\n```jsx\n<Chart data={data}>\n <Axis position=\"bottom\" labelFormat=\"time\" ticks baseline />\n <Axis position=\"left\" grid title=\"Users\" />\n <Line metric=\"users\" color=\"event\" />\n <Legend position=\"bottom\" />\n</Chart>\n```\n\n\n\n\n#### Line with Tooltip and Click Handler\n\n```jsx\n<Chart data={data}>\n <Axis position=\"bottom\" labelFormat=\"time\" ticks baseline />\n <Axis position=\"left\" grid title=\"Users\" />\n <Line metric=\"users\" color=\"browser\" onClick={(event, data) => console.log('Clicked:', data)}>\n <ChartTooltip>\n {(datum) => (\n <div>\n <div>{datum.date}</div>\n <div>Event: {datum.event}</div>\n <div>Users: {Number(datum.users).toLocaleString()}</div>\n </div>\n )}\n </ChartTooltip>\n </Line>\n <Legend position=\"bottom\" />\n</Chart>\n```\n\n\n\n\n#### Line with Trendline and MetricRange\n\n```jsx\n<Chart data={data}>\n <Axis position=\"bottom\" labelFormat=\"time\" ticks baseline />\n <Axis position=\"left\" grid title=\"Users\" />\n <Line metric=\"users\" color=\"event\">\n <Trendline method=\"quadratic\" />\n <MetricRange upperMetric=\"upperBound\" lowerMetric=\"lowerBound\" />\n </Line>\n</Chart>\n```\n\n\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>children</td>\n <td>ChartTooltip | ChartPopover | MetricRange | Trendline</td>\n <td>–</td>\n <td>Optional elements that can be rendered within the chart. Use these to add tooltips, popovers, metric ranges, or trendlines to your line chart.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>string</td>\n <td>'series'</td>\n <td>The key in the data that defines what color that line will be. This is not a color value itself but rather the key in the data that will map to the colors scale.<br/>For example: A line chart that has a different line and color for each operating system, `color` would be set to the name of the key in the data that defines which operating system it is (color=\"operatingSystem\").</td>\n </tr>\n <tr>\n <td>dimension</td>\n <td>string</td>\n <td>'datetime'</td>\n <td>The key in the data that the metric is trended against. This is the x-axis for a standard line chart.</td>\n </tr>\n <tr>\n <td>lineType</td>\n <td>string | \\{value: LineType | number[]}</td>\n <td>–</td>\n <td>If a string is provided, this string is the key in the data that lines will be grouped into series by. Each unique value for this key in the provided data will map to a line type from the lineTypes scale. <br/>If an object is provided with format `{value: 'solid' | 'dashed' | 'dotted' | number[]}`, this will set the line type for all lines.</td>\n </tr>\n <tr>\n <td>metric</td>\n <td>string</td>\n <td>'value'</td>\n <td>The key in the data that is used for the value of the data point.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Line name. Useful for if you need to traverse the chart object to find this line.</td>\n </tr>\n <tr>\n <td>onClick</td>\n <td>(event: MouseEvent, data: any) => void</td>\n <td>–</td>\n <td>Callback function that will be executed when a point or section of the line is clicked. Receives the mouse event and the data point as arguments.</td>\n </tr>\n <tr>\n <td>padding</td>\n <td>number</td>\n <td>–</td>\n <td>Sets the chart area padding. This is a ratio from 0 to 1 for categorical scales (point) and a pixel value for continuous scales (time, linear)</td>\n </tr>\n <tr>\n <td>scaleType</td>\n <td>'linear' | 'time' | 'point'</td>\n <td>'time'</td>\n <td>Type of data that the line is trended over. If using 'time', the dimension data must be in milliseconds since Jan 1, 1970 UTC (<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#the_ecmascript_epoch_and_timestamps\">epoch time</a>).<br/>If you are plotting this line along with other marks that are ordinal (ex. bar), then you must use a 'point' scale for the two to line up correctly.</td>\n </tr>\n <tr>\n <td>staticPoint</td>\n <td>string</td>\n <td>–</td>\n <td>Key in the data that if it exists and its value is true, a visible point will be shown on the line for that data item.</td>\n </tr>\n </tbody>\n</table>\n\n### Best Practices\n\n1. **Scale Type Selection**\n\n - Use `scaleType=\"time\"` for time-series data\n - Use `scaleType=\"linear\"` for continuous numerical data\n - Use `scaleType=\"point\"` when working with categorical data or when combining with ordinal marks like bars\n\n2. **Interactivity**\n\n - Add tooltips using `ChartTooltip` for better data exploration\n - Use `onClick` handlers for interactive features like drilling down into data\n - Consider using `ChartPopover` for displaying detailed information on click\n\n3. **Data Analysis**\n - Use `Trendline` to show data trends\n - Add `MetricRange` to display confidence intervals or bounds\n - Use `staticPoint` to highlight specific data points of interest\n\n### Accessibility\n\nThe Line component follows accessibility best practices:\n\n- Uses semantic SVG elements for better screen reader support\n- Supports keyboard navigation when interactive elements are added\n- Color combinations should meet WCAG contrast requirements\n"
|
|
770
|
+
"content": "The `Line` component is used to display line charts. You can specify the type of data that the line is being trended over with the `scaleType` prop. You can add `Trendline`s and `MetricRanges` as children to show trends in your data or include a ranged area of data in addition to the line. It's also possible to define tooltips and on-click popovers for the line using the `ChartTooltip` and `ChartPopover` components respectively as children.\n\n### Examples\n\n#### Basic Line Chart\n\n```jsx\n<Chart data={data}>\n <Axis position=\"bottom\" labelFormat=\"time\" ticks baseline />\n <Axis position=\"left\" grid title=\"Users\" />\n <Line metric=\"users\" color=\"event\" />\n <Legend position=\"bottom\" />\n</Chart>\n```\n\n\n\n\n#### Line with Tooltip and Click Handler\n\n```jsx\n<Chart data={data}>\n <Axis position=\"bottom\" labelFormat=\"time\" ticks baseline />\n <Axis position=\"left\" grid title=\"Users\" />\n <Line metric=\"users\" color=\"browser\" onClick={(event, data) => console.log('Clicked:', data)}>\n <ChartTooltip>\n {(datum) => (\n <div>\n <div>{datum.date}</div>\n <div>Event: {datum.event}</div>\n <div>Users: {Number(datum.users).toLocaleString()}</div>\n </div>\n )}\n </ChartTooltip>\n </Line>\n <Legend position=\"bottom\" />\n</Chart>\n```\n\n\n\n\n#### Line with Trendline and MetricRange\n\n```jsx\n<Chart data={data}>\n <Axis position=\"bottom\" labelFormat=\"time\" ticks baseline />\n <Axis position=\"left\" grid title=\"Users\" />\n <Line metric=\"users\" color=\"event\">\n <Trendline method=\"quadratic\" />\n <MetricRange upperMetric=\"upperBound\" lowerMetric=\"lowerBound\" />\n </Line>\n</Chart>\n```\n\n\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>children</td>\n <td>ChartTooltip | ChartPopover | MetricRange | Trendline</td>\n <td>–</td>\n <td>Optional elements that can be rendered within the chart. Use these to add tooltips, popovers, metric ranges, or trendlines to your line chart.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>string</td>\n <td>'series'</td>\n <td>The key in the data that defines what color that line will be. This is not a color value itself but rather the key in the data that will map to the colors scale.<br/>For example: A line chart that has a different line and color for each operating system, `color` would be set to the name of the key in the data that defines which operating system it is (color=\"operatingSystem\").</td>\n </tr>\n <tr>\n <td>dimension</td>\n <td>string</td>\n <td>'datetime'</td>\n <td>The key in the data that the metric is trended against. This is the x-axis for a standard line chart.</td>\n </tr>\n <tr>\n <td>lineType</td>\n <td>string | \\{value: LineType | number[]}</td>\n <td>–</td>\n <td>If a string is provided, this string is the key in the data that lines will be grouped into series by. Each unique value for this key in the provided data will map to a line type from the lineTypes scale. <br/>If an object is provided with format `{value: 'solid' | 'dashed' | 'dotted' | number[]}`, this will set the line type for all lines.</td>\n </tr>\n <tr>\n <td>metric</td>\n <td>string</td>\n <td>'value'</td>\n <td>The key in the data that is used for the value of the data point.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Line name. Useful for if you need to traverse the chart object to find this line.</td>\n </tr>\n <tr>\n <td>onClick</td>\n <td>(event: MouseEvent, data: any) => void</td>\n <td>–</td>\n <td>Callback function that will be executed when a point or section of the line is clicked. Receives the mouse event and the data point as arguments.</td>\n </tr>\n <tr>\n <td>onMouseOver</td>\n <td>function</td>\n <td>–</td>\n <td>Callback function that will be executed when a point or section of the line is hovered.</td>\n </tr>\n <tr>\n <td>onMouseOut</td>\n <td>function</td>\n <td>–</td>\n <td>Callback function that will be executed when a point or section of the line is no longer hovered.</td>\n </tr>\n <tr>\n <td>padding</td>\n <td>number</td>\n <td>–</td>\n <td>Sets the chart area padding. This is a ratio from 0 to 1 for categorical scales (point) and a pixel value for continuous scales (time, linear)</td>\n </tr>\n <tr>\n <td>scaleType</td>\n <td>'linear' | 'time' | 'point'</td>\n <td>'time'</td>\n <td>Type of data that the line is trended over. If using 'time', the dimension data must be in milliseconds since Jan 1, 1970 UTC (<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#the_ecmascript_epoch_and_timestamps\">epoch time</a>).<br/>If you are plotting this line along with other marks that are ordinal (ex. bar), then you must use a 'point' scale for the two to line up correctly.</td>\n </tr>\n <tr>\n <td>staticPoint</td>\n <td>string</td>\n <td>–</td>\n <td>Key in the data that if it exists and its value is true, a visible point will be shown on the line for that data item.</td>\n </tr>\n </tbody>\n</table>\n\n### Best Practices\n\n1. **Scale Type Selection**\n\n - Use `scaleType=\"time\"` for time-series data\n - Use `scaleType=\"linear\"` for continuous numerical data\n - Use `scaleType=\"point\"` when working with categorical data or when combining with ordinal marks like bars\n\n2. **Interactivity**\n\n - Add tooltips using `ChartTooltip` for better data exploration\n - Use `onClick` handlers for interactive features like drilling down into data\n - Consider using `ChartPopover` for displaying detailed information on click\n\n3. **Data Analysis**\n - Use `Trendline` to show data trends\n - Add `MetricRange` to display confidence intervals or bounds\n - Use `staticPoint` to highlight specific data points of interest\n\n### Accessibility\n\nThe Line component follows accessibility best practices:\n\n- Uses semantic SVG elements for better screen reader support\n- Supports keyboard navigation when interactive elements are added\n- Color combinations should meet WCAG contrast requirements\n"
|
|
771
771
|
},
|
|
772
772
|
{
|
|
773
773
|
"id": "api/visualizations/Scatter",
|