From 2d9246bead24f20cd3638db9ce91f63e27704f5d Mon Sep 17 00:00:00 2001 From: Marshall Peterson Date: Thu, 2 Nov 2023 11:55:32 -0600 Subject: [PATCH 1/2] refactor: rename all prism references to chart or rsc --- .gitignore | 2 +- .vscode/prism.code-snippets | 38 ---- README.md | 42 ++--- src/{Prism.css => Chart.css} | 2 +- src/{Prism.tsx => Chart.tsx} | 52 +++--- src/constants.ts | 8 +- ...andle.tsx => useChartImperativeHandle.tsx} | 6 +- .../{usePrismProps.tsx => useChartProps.tsx} | 5 +- src/hooks/useDebugSpec.tsx | 10 +- src/hooks/useLegend.tsx | 9 +- src/hooks/usePopovers.tsx | 18 +- src/hooks/useTooltips.tsx | 20 +- src/index.ts | 2 +- src/specBuilder/axis/axisLabelUtils.ts | 20 +- src/specBuilder/axis/axisSpecBuilder.test.ts | 12 +- .../axisAnnotationUtils.test.ts | 8 +- src/specBuilder/bar/barSpecBuilder.test.ts | 10 +- src/specBuilder/bar/barSpecBuilder.ts | 6 +- src/specBuilder/bar/dodgedBarUtils.test.ts | 2 +- ...ilder.test.ts => chartSpecBuilder.test.ts} | 8 +- ...rismSpecBuilder.ts => chartSpecBuilder.ts} | 36 ++-- src/specBuilder/data/dataUtils.ts | 2 +- src/specBuilder/index.ts | 2 +- src/specBuilder/legend/legendSpecBuilder.ts | 15 +- src/specBuilder/marks/markUtils.ts | 2 +- .../signal/signalSpecBuilder.test.ts | 2 +- src/specBuilder/signal/signalSpecBuilder.ts | 2 +- src/specBuilder/specUtils.test.ts | 15 +- src/specBuilder/specUtils.ts | 18 +- src/specBuilder/trendline/trendlineUtils.ts | 4 +- .../{Prism.story.css => Chart.story.css} | 0 .../{Prism.story.tsx => Chart.story.tsx} | 28 +-- .../{Prism.test.tsx => Chart.test.tsx} | 66 +++---- .../{PrismBarStory.tsx => ChartBarStory.tsx} | 14 +- ...Colors.story.tsx => ChartColors.story.tsx} | 17 +- ...ples.story.tsx => ChartExamples.story.tsx} | 118 ++++++------ ...amples.test.tsx => ChartExamples.test.tsx} | 92 ++++----- ...ndles.story.tsx => ChartHandles.story.tsx} | 27 +-- ...States.story.tsx => ChartStates.story.tsx} | 13 +- ...ga.story.tsx => ChartUnsafeVega.story.tsx} | 18 +- ...Vega.test.tsx => ChartUnsafeVega.test.tsx} | 44 ++--- .../Annotation/Annotation.story.tsx | 14 +- .../components/Annotation/Annotation.test.tsx | 19 +- src/stories/components/Area/Area.story.tsx | 22 +-- src/stories/components/Area/Area.test.tsx | 48 ++--- .../components/Area/StackedArea.story.tsx | 34 ++-- src/stories/components/Axis/Axis.story.tsx | 40 ++-- src/stories/components/Axis/Axis.test.tsx | 53 +++--- .../Axis/AxisReferenceLine.story.tsx | 14 +- .../Axis/AxisReferenceLine.test.tsx | 16 +- .../AxisAnnotation/AxisAnnotation.story.tsx | 28 +-- .../AxisAnnotation/AxisAnnotation.test.tsx | 40 ++-- src/stories/components/Bar/Bar.story.tsx | 12 +- src/stories/components/Bar/Bar.test.tsx | 49 +++-- .../components/Bar/DodgedBar.story.tsx | 24 +-- .../components/Bar/ReferenceLineBar.story.tsx | 22 +-- .../components/Bar/ReferenceLineBar.test.tsx | 176 +++++++++--------- .../components/Bar/StackedBar.story.tsx | 18 +- .../components/Bar/TrellisBar.story.tsx | 12 +- .../components/Bar/TrellisBar.test.tsx | 51 ++--- .../ChartPopover/ChartPopover.story.tsx | 43 ++--- .../ChartPopover/ChartPopover.test.tsx | 66 +++---- .../ChartTooltip/ChartTooltip.story.tsx | 30 +-- .../ChartTooltip/ChartTooltip.test.tsx | 40 ++-- .../components/Legend/Legend.story.tsx | 4 +- src/stories/components/Legend/Legend.test.tsx | 42 ++--- .../Legend/LegendHideShow.story.tsx | 4 +- .../components/Legend/LegendHideShow.test.tsx | 42 ++--- .../Legend/LegendHighlight.story.tsx | 4 +- .../Legend/LegendHighlight.test.tsx | 38 ++-- .../components/Legend/LegendStoryUtils.tsx | 30 +-- .../components/Legend/LegendSymbol.story.tsx | 21 ++- .../components/Legend/LegendSymbol.test.tsx | 38 ++-- .../components/Legend/legendHover.story.tsx | 4 +- .../components/Legend/legendHover.test.tsx | 8 +- src/stories/components/Line/Line.story.tsx | 48 ++--- src/stories/components/Line/Line.test.tsx | 84 +++++---- .../MetricRange/MetricRange.story.tsx | 34 ++-- .../MetricRange/MetricRange.test.tsx | 38 ++-- src/stories/components/Title/Title.story.tsx | 14 +- src/stories/components/Title/Title.test.tsx | 33 ++-- .../components/Trendline/Trendline.story.tsx | 20 +- .../components/Trendline/Trendline.test.tsx | 26 +-- src/test-utils/customQueries.ts | 3 +- src/test-utils/utils.ts | 3 +- src/themes/spectrumTheme.ts | 9 +- src/types/{Prism.ts => Chart.ts} | 28 +-- src/types/index.ts | 2 +- src/types/specBuilderTypes.ts | 2 +- src/utils/markClickUtils.ts | 21 ++- src/utils/utils.test.tsx | 6 +- src/utils/utils.ts | 42 ++--- templates/story.hbs | 40 ++-- templates/test.hbs | 24 ++- tsconfig.json | 2 +- 95 files changed, 1186 insertions(+), 1214 deletions(-) delete mode 100644 .vscode/prism.code-snippets rename src/{Prism.css => Chart.css} (98%) rename src/{Prism.tsx => Chart.tsx} (88%) rename src/hooks/{usePrismImperativeHandle.tsx => useChartImperativeHandle.tsx} (95%) rename src/hooks/{usePrismProps.tsx => useChartProps.tsx} (88%) rename src/specBuilder/{prismSpecBuilder.test.ts => chartSpecBuilder.test.ts} (99%) rename src/specBuilder/{prismSpecBuilder.ts => chartSpecBuilder.ts} (91%) rename src/stories/{Prism.story.css => Chart.story.css} (100%) rename src/stories/{Prism.story.tsx => Chart.story.tsx} (75%) rename src/stories/{Prism.test.tsx => Chart.test.tsx} (82%) rename src/stories/{PrismBarStory.tsx => ChartBarStory.tsx} (79%) rename src/stories/{PrismColors.story.tsx => ChartColors.story.tsx} (79%) rename src/stories/{PrismExamples.story.tsx => ChartExamples.story.tsx} (89%) rename src/stories/{PrismExamples.test.tsx => ChartExamples.test.tsx} (76%) rename src/stories/{PrismHandles.story.tsx => ChartHandles.story.tsx} (81%) rename src/stories/{PrismStates.story.tsx => ChartStates.story.tsx} (81%) rename src/stories/{PrismUnsafeVega.story.tsx => ChartUnsafeVega.story.tsx} (96%) rename src/stories/{PrismUnsafeVega.test.tsx => ChartUnsafeVega.test.tsx} (74%) rename src/types/{Prism.ts => Chart.ts} (96%) diff --git a/.gitignore b/.gitignore index 5605ba25a..396a4f3aa 100644 --- a/.gitignore +++ b/.gitignore @@ -17,4 +17,4 @@ test-report.xml # exclude vscode config except for our shared snippets .vscode/* -!.vscode/prism.code-snippets \ No newline at end of file +!.vscode/reactSpectrumCharts.code-snippets \ No newline at end of file diff --git a/.vscode/prism.code-snippets b/.vscode/prism.code-snippets deleted file mode 100644 index 3745a4952..000000000 --- a/.vscode/prism.code-snippets +++ /dev/null @@ -1,38 +0,0 @@ -{ - "Log variable": { - "scope": "javascript,javascriptreact,typescript,typescriptreact", - "prefix": "log-variable", - "body": "console.log('$1:', $1);", - "description": "console log a variable." - }, - "Log variable verbose": { - "scope": "javascript,javascriptreact,typescript,typescriptreact", - "prefix": "log-variable-verbose", - "body": "console.log('$TM_FILENAME:$TM_LINE_NUMBER $1:', $1);", - "description": "console log a variable with filename and line number." - }, - "Log clipboard": { - "scope": "javascript,javascriptreact,typescript,typescriptreact", - "prefix": "log-clipboard", - "body": "console.log('$CLIPBOARD:', $CLIPBOARD);", - "description": "console log clipboard contents." - }, - "Jest describe": { - "scope": "javascript,javascriptreact,typescript,typescriptreact", - "prefix": "jest-describe", - "body": "describe('$1', () => {\n\t$2\n})", - "description": "jest describe block" - }, - "Jest test": { - "scope": "javascript,javascriptreact,typescript,typescriptreact", - "prefix": "jest-test", - "body": "test('$1', () => {\n\t$2\n})", - "description": "jest test block" - }, - "rgb": { - "scope": "javascript,javascriptreact,typescript,typescriptreact", - "prefix": "rgb", - "body": "'rgb($1, $2, $3)'", - "description": "rgb string" - } -} diff --git a/README.md b/README.md index 7c7a4c594..1249d2079 100644 --- a/README.md +++ b/README.md @@ -14,23 +14,23 @@ ## Table of Contents -- [React Spectrum Charts](#react-spectrum-charts) - - [Table of Contents](#table-of-contents) - - [Overview](#overview) - - [Key Features:](#key-features) - - [Installation](#installation) - - [npm](#npm) - - [yarn](#yarn) - - [Usage](#usage) - - [Example](#example) - - [Spectrum (Adobe Design System) Integration](#spectrum-adobe-design-system-integration) - - [API](#api) - - [Storybook](#storybook) - - [Support](#support) - - [Contributing](#contributing) - - [License](#license) - - [Apache License 2.0 Summary](#apache-license-20-summary) - - [Roadmap](#roadmap) +- [React Spectrum Charts](#react-spectrum-charts) + - [Table of Contents](#table-of-contents) + - [Overview](#overview) + - [Key Features:](#key-features) + - [Installation](#installation) + - [npm](#npm) + - [yarn](#yarn) + - [Usage](#usage) + - [Example](#example) + - [Spectrum (Adobe Design System) Integration](#spectrum-adobe-design-system-integration) + - [API](#api) + - [Storybook](#storybook) + - [Support](#support) + - [Contributing](#contributing) + - [License](#license) + - [Apache License 2.0 Summary](#apache-license-20-summary) + - [Roadmap](#roadmap) ## Overview @@ -85,24 +85,24 @@ yarn add @adobe/react-spectrum-charts `react-spectrum-charts` is designed in a way that makes composing charts similar to composing any other app content in JSX. -Each chart is wrapped in the `` component. The child components and their props control the contents of the chart. +Each chart is wrapped in the `` component. The child components and their props control the contents of the chart. ### Example ``` import React from 'react'; -import {Axis, Bar, Legend, Prism} from '@adobe/react-spectrum-charts'; +import {Axis, Bar, Legend, Chart} from '@adobe/react-spectrum-charts'; const MyChart: FC = (props) => { ... return ( - + - + ) } ``` diff --git a/src/Prism.css b/src/Chart.css similarity index 98% rename from src/Prism.css rename to src/Chart.css index 1f551d99c..e1c8dc39b 100644 --- a/src/Prism.css +++ b/src/Chart.css @@ -53,6 +53,6 @@ this removes transitions in the vega tooltip margin: 0px; max-width: 150px; } -.prism-container { +.rsc-container { position: relative; } diff --git a/src/Prism.tsx b/src/Chart.tsx similarity index 88% rename from src/Prism.tsx rename to src/Chart.tsx index 1e02c1875..02bdbc0bb 100644 --- a/src/Prism.tsx +++ b/src/Chart.tsx @@ -14,18 +14,18 @@ import React, { FC, MutableRefObject, forwardRef, useEffect, useMemo, useRef, us import { EmptyState } from '@components/EmptyState'; import { LoadingState } from '@components/LoadingState'; import { DEFAULT_COLOR_SCHEME, DEFAULT_LINE_TYPES, MARK_ID } from '@constants'; +import useChartImperativeHandle from '@hooks/useChartImperativeHandle'; import useChartWidth from '@hooks/useChartWidth'; import { useDebugSpec } from '@hooks/useDebugSpec'; import useElementSize from '@hooks/useElementSize'; import useLegend from '@hooks/useLegend'; import usePopoverAnchorStyle from '@hooks/usePopoverAnchorStyle'; import usePopovers, { PopoverDetail } from '@hooks/usePopovers'; -import usePrismImperativeHandle from '@hooks/usePrismImperativeHandle'; import useSpec from '@hooks/useSpec'; import useSpecProps from '@hooks/useSpecProps'; import useTooltips from '@hooks/useTooltips'; import { getColorValue } from '@specBuilder/specUtils'; -import { getPrismConfig } from '@themes/spectrumTheme'; +import { getChartConfig } from '@themes/spectrumTheme'; import { debugLog, getOnMarkClickCallback, @@ -49,11 +49,11 @@ import { } from '@adobe/react-spectrum'; import { Theme } from '@react-types/provider'; -import './Prism.css'; +import './Chart.css'; import { TABLE } from './constants'; import { expressionFunctions } from './expressionFunctions'; import { extractValues, isVegaData } from './specBuilder/specUtils'; -import { Datum, LegendDescription, MarkBounds, PrismData, PrismHandle, PrismProps } from './types'; +import { ChartData, ChartHandle, ChartProps, Datum, LegendDescription, MarkBounds } from './types'; interface ChartDialogProps { datum: Datum | null; @@ -70,12 +70,12 @@ interface LegendTooltipProps { } interface PlaceholderContentProps { - data: PrismData[]; + data: ChartData[]; loading?: boolean; height?: number; } -export const Prism = forwardRef( +export const Chart = forwardRef( ( { backgroundColor = 'transparent', @@ -106,8 +106,8 @@ export const Prism = forwardRef( }, forwardedRef ) => { - // uuid is used to make a unique id so there aren't duplicate ids if there is more than one Prism viz in the document - const prismId = useRef(`prism-visuzalizations-${uuid()}`); + // uuid is used to make a unique id so there aren't duplicate ids if there is more than one Chart component in the document + const chartId = useRef(`rsc-${uuid()}`); const chartView = useRef(); // view returned by vega const selectedData = useRef(null); // data that is currently selected, get's set on click if a popover exists const selectedDataName = useRef(); @@ -136,7 +136,7 @@ export const Prism = forwardRef( }); const { controlledHoverSignal, selectedIdSignalName, selectedSeriesSignalName } = useSpecProps(spec); - const prismConfig = useMemo(() => getPrismConfig(config, colorScheme), [config, colorScheme]); + const chartConfig = useMemo(() => getChartConfig(config, colorScheme), [config, colorScheme]); // Need to de a deep copy of the data because vega tries to transform the data const chartData = useMemo(() => { @@ -163,11 +163,11 @@ export const Prism = forwardRef( } }, [popoverIsOpen]); - usePrismImperativeHandle(forwardedRef, { chartView, title }); + useChartImperativeHandle(forwardedRef, { chartView, title }); const [containerWidth] = useElementSize(containerRef); // gets the width of the container that wraps vega const chartWidth = useChartWidth(containerWidth, maxWidth, minWidth, width); // calculates the width the vega chart should be - useDebugSpec(debug, spec, chartData, chartWidth, height, prismConfig); + useDebugSpec(debug, spec, chartData, chartWidth, height, chartConfig); const { hiddenSeriesState, @@ -216,13 +216,13 @@ export const Prism = forwardRef( ); } // get the correct tooltip to render based on the hovered item - const tooltip = tooltips.find((t) => t.name === value.prismComponentName)?.callback; + const tooltip = tooltips.find((t) => t.name === value.rscComponentName)?.callback; if (tooltip && !('index' in value)) { if (controlledHoverSignal) { chartView.current?.signal(controlledHoverSignal.name, value?.[MARK_ID] ?? null); } return renderToStaticMarkup( -
+
{tooltip(value)}
); @@ -233,14 +233,14 @@ export const Prism = forwardRef( if (props.children && UNSAFE_vegaSpec) { throw new Error( - 'Prism cannot accept both children and `UNSAFE_vegaSpec` prop. Please choose one or the other.' + 'Chart cannot accept both children and `UNSAFE_vegaSpec` prop. Please choose one or the other.' ); } - // Prism requires children or a Vega spec to configure what is drawn. If there aren't any children or a Vega spec, throw an error and return a fragment. + // Chart requires children or a Vega spec to configure what is drawn. If there aren't any children or a Vega spec, throw an error and return a fragment. if (!props.children && !UNSAFE_vegaSpec) { throw new Error( - 'No children in the component. Prism is a collection components and requires children to draw correctly.' + 'No children in the component. Chart is a collection components and requires children to draw correctly.' ); } @@ -248,14 +248,14 @@ export const Prism = forwardRef(
@@ -264,9 +264,9 @@ export const Prism = forwardRef( ) : ( ( getOnMarkClickCallback( chartView, hiddenSeriesState, - prismId, + chartId, selectedData, selectedDataBounds, selectedDataName, @@ -326,7 +326,7 @@ export const Prism = forwardRef( ); } ); -Prism.displayName = 'Prism'; +Chart.displayName = 'Chart'; const ChartDialog = ({ datum, itemName, targetElement, setPopoverState, popovers }: ChartDialogProps) => { if (!popovers.length) { @@ -346,7 +346,7 @@ const ChartDialog = ({ datum, itemName, targetElement, setPopoverState, popovers > launch chart popover {(close) => ( - + {popover && datum && popover(datum, close)} @@ -363,7 +363,7 @@ const LegendTooltip: FC = ({ value, descriptions, domain }) return <>; } return ( -
+
{description.title || series}

{description.description}

diff --git a/src/constants.ts b/src/constants.ts index a5a91be94..d7255f127 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -35,10 +35,10 @@ export const TABLE = 'table'; export const FILTERED_TABLE = 'filteredTable'; // vega data field names -export const SERIES_ID = 'prismSeriesId'; -export const MARK_ID = 'prismMarkId'; -export const TRENDLINE_VALUE = 'prismTrendlineValue'; -export const STACK_ID = 'prismStackId'; +export const SERIES_ID = 'rscSeriesId'; +export const MARK_ID = 'rscMarkId'; +export const TRENDLINE_VALUE = 'rscTrendlineValue'; +export const STACK_ID = 'rscStackId'; // corner radius export const CORNER_RADIUS = 6; diff --git a/src/hooks/usePrismImperativeHandle.tsx b/src/hooks/useChartImperativeHandle.tsx similarity index 95% rename from src/hooks/usePrismImperativeHandle.tsx rename to src/hooks/useChartImperativeHandle.tsx index 73c64ae63..80f92d863 100644 --- a/src/hooks/usePrismImperativeHandle.tsx +++ b/src/hooks/useChartImperativeHandle.tsx @@ -11,11 +11,11 @@ */ import { MutableRefObject, Ref, useImperativeHandle } from 'react'; -import { PrismHandle } from 'types'; +import { ChartHandle } from 'types'; import { View } from 'vega'; -export default function usePrismImperativeHandle( - forwardedRef: Ref, +export default function useChartImperativeHandle( + forwardedRef: Ref, { chartView, title }: { chartView: MutableRefObject; title?: string } ) { return useImperativeHandle(forwardedRef, () => ({ diff --git a/src/hooks/usePrismProps.tsx b/src/hooks/useChartProps.tsx similarity index 88% rename from src/hooks/usePrismProps.tsx rename to src/hooks/useChartProps.tsx index 1272e6e35..12e74f30c 100644 --- a/src/hooks/usePrismProps.tsx +++ b/src/hooks/useChartProps.tsx @@ -9,11 +9,10 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - import { useDarkMode } from 'storybook-dark-mode'; -import { PrismProps } from 'types'; +import { ChartProps } from 'types'; -export default function usePrismProps(props: PrismProps): PrismProps { +export default function useChartProps(props: ChartProps): ChartProps { const darkMode = useDarkMode(); return { colorScheme: darkMode ? 'dark' : 'light', ...props }; } diff --git a/src/hooks/useDebugSpec.tsx b/src/hooks/useDebugSpec.tsx index acd6a4b0d..51bc1bcde 100644 --- a/src/hooks/useDebugSpec.tsx +++ b/src/hooks/useDebugSpec.tsx @@ -9,9 +9,9 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import { useEffect } from 'react'; import { debugLog } from '@utils'; -import { useEffect } from 'react'; import { Config, Spec } from 'vega'; import { mergeValuesIntoData } from '../specBuilder/specUtils'; @@ -22,7 +22,7 @@ export const useDebugSpec = ( chartData: unknown[], chartWidth: number, height: number, - prismConfig: Config, + config: Config ): void => { useEffect(() => { if (debug) { @@ -32,9 +32,9 @@ export const useDebugSpec = ( const combinedData = mergeValuesIntoData(data, chartData); debugLog(debug, { - title: 'Prism Vega Spec', - contents: { width: chartWidth, height, config: prismConfig, ...spec, data: combinedData }, + title: 'react-spectrum-charts Vega Spec', + contents: { width: chartWidth, height, config, ...spec, data: combinedData }, }); } - }, [debug, spec, chartData, chartWidth, height, prismConfig]); + }, [debug, spec, chartData, chartWidth, height, config]); }; diff --git a/src/hooks/useLegend.tsx b/src/hooks/useLegend.tsx index 31c023d58..b2171c580 100644 --- a/src/hooks/useLegend.tsx +++ b/src/hooks/useLegend.tsx @@ -9,12 +9,13 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import { createElement, useMemo, useState } from 'react'; -import { useMemo, useState } from 'react'; -import { ChartChildElement, LegendDescription, LegendElement, PrismElement } from 'types'; +import { getElement } from '@utils'; +import { ChartChildElement, LegendDescription, LegendElement } from 'types'; +import { Chart } from '../Chart'; import { Legend } from '../components/Legend'; -import { getElement } from '@utils'; interface UseLegendProps { hiddenSeriesState: string[]; @@ -28,7 +29,7 @@ interface UseLegendProps { export default function useLegend(children: ChartChildElement[]): UseLegendProps { const legend = useMemo(() => { - return getElement({ type: { name: 'Prism' }, props: { children } } as PrismElement, Legend); + return getElement(createElement(Chart, { data: [] }, children), Legend); }, [children]) as LegendElement; const [hiddenSeriesState, setHiddenSeries] = useState(legend?.props?.defaultHiddenSeries ?? []); if (!legend) return { hiddenSeriesState, setHiddenSeries }; diff --git a/src/hooks/usePopovers.tsx b/src/hooks/usePopovers.tsx index e7f3189e6..40e4f6737 100644 --- a/src/hooks/usePopovers.tsx +++ b/src/hooks/usePopovers.tsx @@ -9,12 +9,13 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import { createElement, useMemo } from 'react'; -import { useMemo } from 'react'; -import { ChartChildElement, ChartPopoverElement, PopoverHandler, PrismElement } from 'types'; +import { getAllElements } from '@utils'; +import { ChartChildElement, ChartPopoverElement, PopoverHandler } from 'types'; +import { Chart } from '../Chart'; import { ChartPopover } from '../components/ChartPopover'; -import { getAllElements } from '@utils'; type MappedPopover = { name: string; element: ChartPopoverElement }; @@ -22,13 +23,8 @@ export type PopoverDetail = { name: string; callback: PopoverHandler; width?: nu export default function usePopovers(children: ChartChildElement[]): PopoverDetail[] { const popoverElements = useMemo( - () => - getAllElements( - { type: { name: 'Prism' }, props: { children } } as PrismElement, - ChartPopover, - [], - ) as MappedPopover[], - [children], + () => getAllElements(createElement(Chart, { data: [] }, children), ChartPopover, []) as MappedPopover[], + [children] ); return useMemo( @@ -40,6 +36,6 @@ export default function usePopovers(children: ChartChildElement[]): PopoverDetai callback: popover.element.props.children, width: popover.element.props.width, })) as PopoverDetail[], - [popoverElements], + [popoverElements] ); } diff --git a/src/hooks/useTooltips.tsx b/src/hooks/useTooltips.tsx index 243429b64..48308a341 100644 --- a/src/hooks/useTooltips.tsx +++ b/src/hooks/useTooltips.tsx @@ -9,12 +9,13 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import { createElement, useMemo } from 'react'; -import { useMemo } from 'react'; -import { ChartChildElement, ChartTooltipElement, TooltipHandler, PrismElement } from 'types'; - -import { getAllElements } from '@utils'; import { ChartTooltip } from '@components/ChartTooltip'; +import { getAllElements } from '@utils'; +import { ChartChildElement, ChartTooltipElement, TooltipHandler } from 'types'; + +import { Chart } from '../Chart'; type MappedTooltip = { name: string; element: ChartTooltipElement }; @@ -22,13 +23,8 @@ export type TooltipDetail = { name: string; callback: TooltipHandler; width?: nu export default function useTooltips(children: ChartChildElement[]): TooltipDetail[] { const tooltipElements = useMemo( - () => - getAllElements( - { type: { name: 'Prism' }, props: { children } } as PrismElement, - ChartTooltip, - [], - ) as MappedTooltip[], - [children], + () => getAllElements(createElement(Chart, { data: [] }, children), ChartTooltip, []) as MappedTooltip[], + [children] ); return useMemo( @@ -39,6 +35,6 @@ export default function useTooltips(children: ChartChildElement[]): TooltipDetai name: tooltip.name, callback: tooltip.element.props.children, })) as TooltipDetail[], - [tooltipElements], + [tooltipElements] ); } diff --git a/src/index.ts b/src/index.ts index 8faf4952f..836f42996 100644 --- a/src/index.ts +++ b/src/index.ts @@ -23,6 +23,6 @@ export * from './components/MetricRange'; export * from './components/ReferenceLine'; export * from './components/Trendline'; export * from './components/Title'; -export * from './Prism'; +export * from './Chart'; export * from './themes'; export * from './types/'; diff --git a/src/specBuilder/axis/axisLabelUtils.ts b/src/specBuilder/axis/axisLabelUtils.ts index 84b4eef5b..7758e418c 100644 --- a/src/specBuilder/axis/axisLabelUtils.ts +++ b/src/specBuilder/axis/axisLabelUtils.ts @@ -9,7 +9,6 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - import { Granularity, Label, LabelAlign, LabelFormat, Position } from 'types'; import { Align, @@ -24,6 +23,7 @@ import { TextValueRef, TickCount, } from 'vega'; + import { isVerticalAxis } from './axisUtils'; /** @@ -70,7 +70,7 @@ export const getTimeLabelFormats = (granularity: Granularity): [string, string, */ export const getLabelBaselineAlign = ( labelAlign: LabelAlign | undefined, - position: Position, + position: Position ): Align | Baseline | undefined => { switch (position) { case 'top': @@ -83,14 +83,14 @@ export const getLabelBaselineAlign = ( }; /** - * gets the vega labelAlign value based on the prism labelAlign value + * gets the vega labelAlign value based on the labelAlign value * @param labelAlign * @returns */ export const getLabelAlign = ( labelAlign: LabelAlign | undefined, position: Position, - vegaLabelAlign?: Align, + vegaLabelAlign?: Align ): Align | undefined => { if (vegaLabelAlign) return vegaLabelAlign; if (!labelAlign) return; @@ -108,14 +108,14 @@ export const getLabelAlign = ( }; /** - * gets the vega baseline value based on the prism labelAlign value + * gets the vega baseline value based on the labelAlign value * @param labelAlign * @returns */ export const getLabelBaseline = ( labelAlign: LabelAlign | undefined, position: Position, - vegaLabelBaseline?: Baseline, + vegaLabelBaseline?: Baseline ): Baseline | undefined => { if (vegaLabelBaseline) return vegaLabelBaseline; if (!labelAlign) return; @@ -141,7 +141,7 @@ export const getLabelBaseline = ( export const getLabelOffset = ( labelAlign: LabelAlign, scaleName: string, - vegaLabelOffset?: NumberValue, + vegaLabelOffset?: NumberValue ): NumberValue | undefined => { if (vegaLabelOffset !== undefined) return vegaLabelOffset; switch (labelAlign) { @@ -155,7 +155,7 @@ export const getLabelOffset = ( }; /** - * gets the vega label format based on the prism labelFormat + * gets the vega label format based on the labelFormat * @param type * @returns */ @@ -188,7 +188,7 @@ export const getAxisLabelsEncoding = ( labelFontWeight: FontWeight, labelKey: 'label' | 'subLabel', position: Position, - signalName: string, + signalName: string ): GuideEncodeEntry => ({ update: { text: [ @@ -223,7 +223,7 @@ export const getAxisLabelsEncoding = ( export const getEncodedLabelBaselineAlign = ( position: Position, signalName: string, - defaultLabelAlign: LabelAlign, + defaultLabelAlign: LabelAlign ): EncodeEntry => { const productionRule: ProductionRule> = [ { diff --git a/src/specBuilder/axis/axisSpecBuilder.test.ts b/src/specBuilder/axis/axisSpecBuilder.test.ts index 829efc257..4fc2d1fdf 100644 --- a/src/specBuilder/axis/axisSpecBuilder.test.ts +++ b/src/specBuilder/axis/axisSpecBuilder.test.ts @@ -9,10 +9,10 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import { createElement } from 'react'; import { ReferenceLine } from '@components/ReferenceLine'; import { DEFAULT_LABEL_FONT_WEIGHT, FILTERED_TABLE } from '@constants'; -import { createElement } from 'react'; import { SubLabel } from 'types'; import { Axis, GroupMark, ProductionRule, Scale, Signal, TextValueRef } from 'vega'; @@ -153,7 +153,7 @@ const defaultTrellisGroupMark: GroupMark = { }, }; -describe('Prism spec builder, Axis', () => { +describe('Spec builder, Axis', () => { describe('addAxis()', () => { describe('no initial state', () => { test('position = "bottom"', () => { @@ -185,7 +185,7 @@ describe('Prism spec builder, Axis', () => { }); test('type = percentage', () => { expect( - addAxis({ scales: defaultScales }, { position: 'left', labelFormat: 'percentage' }), + addAxis({ scales: defaultScales }, { position: 'left', labelFormat: 'percentage' }) ).toStrictEqual({ scales: defaultScales, axes: [ @@ -215,7 +215,7 @@ describe('Prism spec builder, Axis', () => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const { domain, domainWidth, ...axis } = defaultAxis; expect( - addAxis({ scales: defaultScales }, { position: 'bottom', subLabels: defaultSubLabels }), + addAxis({ scales: defaultScales }, { position: 'bottom', subLabels: defaultSubLabels }) ).toStrictEqual({ scales: defaultScales, axes: [{ ...axis, labelAlign: 'center', titlePadding: 24 }, defaultSubLabelAxis], @@ -227,7 +227,7 @@ describe('Prism spec builder, Axis', () => { test('custom X range', () => { const resultScales = addAxis( { scales: defaultLinearScales }, - { position: 'bottom', range: [0, 100] }, + { position: 'bottom', range: [0, 100] } ).scales; expect(resultScales?.at(0)?.domain).toEqual([0, 100]); @@ -235,7 +235,7 @@ describe('Prism spec builder, Axis', () => { test('custom Y range', () => { const resultScales = addAxis( { scales: defaultLinearScales }, - { position: 'left', range: [0, 100] }, + { position: 'left', range: [0, 100] } ).scales; expect(resultScales?.at(1)?.domain).toEqual([0, 100]); diff --git a/src/specBuilder/axisAnnotation/axisAnnotationUtils.test.ts b/src/specBuilder/axisAnnotation/axisAnnotationUtils.test.ts index 8d9096147..e65c4fc2f 100644 --- a/src/specBuilder/axisAnnotation/axisAnnotationUtils.test.ts +++ b/src/specBuilder/axisAnnotation/axisAnnotationUtils.test.ts @@ -9,13 +9,13 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - import { AxisAnnotationSpecProps } from 'types'; + import { + addAxisAnnotationAxis, addAxisAnnotationData, - addAxisAnnotationSignals, addAxisAnnotationMarks, - addAxisAnnotationAxis, + addAxisAnnotationSignals, applyDefaultAxisAnnotationProps, } from './axisAnnotationUtils'; @@ -65,7 +65,7 @@ const testAxisAnnotationSummary: AxisAnnotationSpecProps = { children: [], }; -describe('Prism spec builder, AxisAnnotation', () => { +describe('Spec builder, AxisAnnotation', () => { describe('addAxisAnnotationData()', () => { test('test', () => { const data = []; diff --git a/src/specBuilder/bar/barSpecBuilder.test.ts b/src/specBuilder/bar/barSpecBuilder.test.ts index 804a3944d..05432a6e3 100644 --- a/src/specBuilder/bar/barSpecBuilder.test.ts +++ b/src/specBuilder/bar/barSpecBuilder.test.ts @@ -48,9 +48,9 @@ import { addSecondaryScales, addSignals, getDodgeGroupTransform, - getPrismStackIdTransform, getRepeatedScale, getStackAggregateData, + getStackIdTransform, } from './barSpecBuilder'; import { defaultBarProps, @@ -616,9 +616,9 @@ describe('barSpecBuilder', () => { }); }); - describe('getPrismStackIdTransform()', () => { + describe('getStackIdTransform()', () => { test('should return default stack id transform', () => { - expect(getPrismStackIdTransform(defaultBarProps)).toStrictEqual({ + expect(getStackIdTransform(defaultBarProps)).toStrictEqual({ as: STACK_ID, expr: `datum.${DEFAULT_CATEGORICAL_DIMENSION}`, type: 'formula', @@ -626,14 +626,14 @@ describe('barSpecBuilder', () => { }); test('should join all facets if dodged', () => { - expect(getPrismStackIdTransform({ ...defaultBarProps, type: 'dodged' })).toStrictEqual({ + expect(getStackIdTransform({ ...defaultBarProps, type: 'dodged' })).toStrictEqual({ as: STACK_ID, expr: `datum.${DEFAULT_CATEGORICAL_DIMENSION} + "," + datum.${DEFAULT_COLOR}`, type: 'formula', }); expect( - getPrismStackIdTransform({ ...defaultBarProps, type: 'dodged', opacity: DEFAULT_SECONDARY_COLOR }) + getStackIdTransform({ ...defaultBarProps, type: 'dodged', opacity: DEFAULT_SECONDARY_COLOR }) ).toStrictEqual({ as: STACK_ID, expr: `datum.${DEFAULT_CATEGORICAL_DIMENSION} + "," + datum.${DEFAULT_COLOR} + "," + datum.${DEFAULT_SECONDARY_COLOR}`, diff --git a/src/specBuilder/bar/barSpecBuilder.ts b/src/specBuilder/bar/barSpecBuilder.ts index 5d24d718e..a5af6516c 100644 --- a/src/specBuilder/bar/barSpecBuilder.ts +++ b/src/specBuilder/bar/barSpecBuilder.ts @@ -120,7 +120,7 @@ export const addData = produce((data, props) => { as: [`${metric}0`, `${metric}1`], }); - data[index].transform?.push(getPrismStackIdTransform(props)); + data[index].transform?.push(getStackIdTransform(props)); data.push(getStackAggregateData(props)); } if (type === 'dodged' || isDodgedAndStacked(props)) { @@ -147,12 +147,12 @@ export const getStackAggregateData = (props: BarSpecProps): Data => { fields: [`${metric}1`, `${metric}1`], ops: ['min', 'max'], }, - getPrismStackIdTransform(props), + getStackIdTransform(props), ], }; }; -export const getPrismStackIdTransform = (props: BarSpecProps): FormulaTransform => { +export const getStackIdTransform = (props: BarSpecProps): FormulaTransform => { return { type: 'formula', as: STACK_ID, diff --git a/src/specBuilder/bar/dodgedBarUtils.test.ts b/src/specBuilder/bar/dodgedBarUtils.test.ts index 5baff348c..39ec6e6bd 100644 --- a/src/specBuilder/bar/dodgedBarUtils.test.ts +++ b/src/specBuilder/bar/dodgedBarUtils.test.ts @@ -108,7 +108,7 @@ const defaultMarkWithTooltip: Mark = { enter: { ...defaultDodgedYEncodings, ...defaultDodgedCornerRadiusEncodings, - tooltip: { signal: "merge(datum, {'prismComponentName': 'bar0'})" }, + tooltip: { signal: "merge(datum, {'rscComponentName': 'bar0'})" }, fill: { field: DEFAULT_COLOR, scale: 'color' }, }, update: { diff --git a/src/specBuilder/prismSpecBuilder.test.ts b/src/specBuilder/chartSpecBuilder.test.ts similarity index 99% rename from src/specBuilder/prismSpecBuilder.test.ts rename to src/specBuilder/chartSpecBuilder.test.ts index 85c77519b..a2b0dcbc2 100644 --- a/src/specBuilder/prismSpecBuilder.test.ts +++ b/src/specBuilder/chartSpecBuilder.test.ts @@ -18,7 +18,6 @@ import { ROUNDED_SQUARE_PATH } from 'svgPaths'; import { BarProps, LegendProps } from 'types'; import { Data } from 'vega'; -import { setHoverOpacityForMarks } from './legend/legendHighlightUtils'; import { addData, addHighlight, @@ -32,7 +31,8 @@ import { getTwoDimensionalColorScheme, getTwoDimensionalLineTypes, getTwoDimensionalOpacities, -} from './prismSpecBuilder'; +} from './chartSpecBuilder'; +import { setHoverOpacityForMarks } from './legend/legendHighlightUtils'; import { baseData } from './specUtils'; const defaultData: Data[] = [{ name: TABLE, values: [], transform: [{ type: 'identifier', as: MARK_ID }] }]; @@ -58,7 +58,7 @@ afterEach(() => { jest.resetAllMocks(); }); -describe('Prism spec builder', () => { +describe('Chart spec builder', () => { describe('setColorScale()', () => { test('default color scale used', () => { expect(getColorScale('categorical12', 'light')).toStrictEqual({ @@ -283,7 +283,7 @@ describe('Prism spec builder', () => { }); }); - test('should return symbolShape scale with prism shapes', () => { + test('should return symbolShape scale with supported shapes', () => { expect(getSymbolShapeScale(['rounded-square'])).toStrictEqual({ name: 'symbolShape', type: 'ordinal', diff --git a/src/specBuilder/prismSpecBuilder.ts b/src/specBuilder/chartSpecBuilder.ts similarity index 91% rename from src/specBuilder/prismSpecBuilder.ts rename to src/specBuilder/chartSpecBuilder.ts index b8c0104d7..4f184cae6 100644 --- a/src/specBuilder/prismSpecBuilder.ts +++ b/src/specBuilder/chartSpecBuilder.ts @@ -10,13 +10,15 @@ * governing permissions and limitations under the License. */ import { DEFAULT_COLOR_SCHEME, DEFAULT_LINE_TYPES, FILTERED_TABLE, SERIES_ID, TABLE } from '@constants'; -import { Area, Axis, Bar, Legend, Line, Title } from '@prism'; +import { Area, Axis, Bar, Legend, Line, Title } from '@rsc'; import colorSchemes from '@themes/colorSchemes'; import produce from 'immer'; import { AreaElement, AxisElement, BarElement, + ChartColors, + ChartSymbolShape, ColorScale, ColorScheme, Colors, @@ -26,8 +28,6 @@ import { LineTypes, LineWidth, Opacities, - PrismColors, - PrismSymbolShape, SanitizedSpecProps, SymbolShapes, TitleElement, @@ -37,7 +37,7 @@ import { Data, OrdinalScale, PointScale, Scale, Signal, Spec } from 'vega'; import { addArea } from './area/areaSpecBuilder'; import { addAxis } from './axis/axisSpecBuilder'; import { addBar } from './bar/barSpecBuilder'; -import { getPrismSeriesIdTransform } from './data/dataUtils'; +import { getSeriesIdTransform } from './data/dataUtils'; import { setHoverOpacityForMarks } from './legend/legendHighlightUtils'; import { addLegend } from './legend/legendSpecBuilder'; import { addLine } from './line/lineSpecBuilder'; @@ -46,7 +46,7 @@ import { getColorValue, getFacetsFromScales, getLineWidthPixelsFromLineWidth, - getPathFromPrismSymbolShape, + getPathFromSymbolShape, getStrokeDashFromLineType, initializeSpec, } from './specUtils'; @@ -154,7 +154,7 @@ const initializeComponentCounts = () => { }; export const getDefaultSignals = ( - colors: PrismColors, + colors: ChartColors, colorScheme: ColorScheme, lineTypes: LineTypes, opacities: Opacities | undefined, @@ -167,7 +167,7 @@ export const getDefaultSignals = ( getGenericSignal('hiddenSeries', hiddenSeries ?? []), ]; -export const getTwoDimensionalColorScheme = (colors: PrismColors, colorScheme: ColorScheme): string[][] => { +export const getTwoDimensionalColorScheme = (colors: ChartColors, colorScheme: ColorScheme): string[][] => { if (isColors(colors)) { return getColors(colors, colorScheme).map((color) => [color]); } @@ -194,7 +194,7 @@ export const getTwoDimensionalOpacities = (opacities: Opacities | undefined): nu }; const getDefaultScales = ( - colors: PrismColors, + colors: ChartColors, colorScheme: ColorScheme, lineTypes: LineTypes, lineWidths: LineWidth[], @@ -208,7 +208,7 @@ const getDefaultScales = ( getSymbolShapeScale(symbolShapes), ]; -export const getColorScale = (colors: PrismColors, colorScheme: ColorScheme): OrdinalScale => { +export const getColorScale = (colors: ChartColors, colorScheme: ColorScheme): OrdinalScale => { // if a two dimensional scale was provided, then just grab the first color in each scale and set that as the scale range const range = isColors(colors) ? getColors(colors, colorScheme) : colors.map((c) => getColors(c, colorScheme)[0]); return { @@ -233,9 +233,9 @@ export const getLineTypeScale = (lineTypes: LineTypes): OrdinalScale => { }; export const getSymbolShapeScale = (symbolShapes: SymbolShapes): OrdinalScale => { // if a two dimensional scale was provided, then just grab the first color in each scale and set that as the scale range - const range = isPrismSymbolShapeArray(symbolShapes) - ? getPathsFromPrismSymbolShapes(symbolShapes) - : symbolShapes.map((symbolShape) => getPathFromPrismSymbolShape(symbolShape[0])); + const range = isSymbolShapeArray(symbolShapes) + ? getPathsFromSymbolShapes(symbolShapes) + : symbolShapes.map((symbolShape) => getPathFromSymbolShape(symbolShape[0])); return { name: 'symbolShape', type: 'ordinal', @@ -282,8 +282,8 @@ function getStrokeDashesFromLineTypes(lineTypes: LineType[]): number[][] { return lineTypes.map((lineType) => getStrokeDashFromLineType(lineType)); } -function getPathsFromPrismSymbolShapes(symbolShapes: PrismSymbolShape[]) { - return symbolShapes.map((symbolShape) => getPathFromPrismSymbolShape(symbolShape)); +function getPathsFromSymbolShapes(symbolShapes: ChartSymbolShape[]) { + return symbolShapes.map((symbolShape) => getPathFromSymbolShape(symbolShape)); } /** @@ -291,7 +291,7 @@ function getPathsFromPrismSymbolShapes(symbolShapes: PrismSymbolShape[]) { */ export const addData = produce((data, { facets }) => { if (facets.length === 0) return; - data[0]?.transform?.push(getPrismSeriesIdTransform(facets)); + data[0]?.transform?.push(getSeriesIdTransform(facets)); // add a filter transform to the TABLE data that filters out any hidden series const index = data.findIndex((datum) => datum.name === FILTERED_TABLE); @@ -303,11 +303,11 @@ export const addData = produce((data, { facets } } }); -export const isColorScale = (colors: PrismColors): colors is ColorScale => { +export const isColorScale = (colors: ChartColors): colors is ColorScale => { return Boolean(!Array.isArray(colors) && colors in colorSchemes); }; -export const isColors = (colors: PrismColors): colors is Colors => { +export const isColors = (colors: ChartColors): colors is Colors => { return isColorScale(colors) || colors.some((color) => !isColorScale(color) && typeof color === 'string'); }; @@ -323,6 +323,6 @@ export const isNumberArray = (opacities: Opacities): opacities is number[] => { return !opacities.some((opacity) => Array.isArray(opacity)); }; -export const isPrismSymbolShapeArray = (symbolShapes: SymbolShapes): symbolShapes is PrismSymbolShape[] => { +export const isSymbolShapeArray = (symbolShapes: SymbolShapes): symbolShapes is ChartSymbolShape[] => { return !symbolShapes.some((symbolShape) => Array.isArray(symbolShape)); }; diff --git a/src/specBuilder/data/dataUtils.ts b/src/specBuilder/data/dataUtils.ts index 24a914d85..519d82507 100644 --- a/src/specBuilder/data/dataUtils.ts +++ b/src/specBuilder/data/dataUtils.ts @@ -49,7 +49,7 @@ export const getFilteredTableData = (data: Data[]): SourceData => { return data.find((d) => d.name === FILTERED_TABLE) as SourceData; }; -export const getPrismSeriesIdTransform = (facets: string[]): FormulaTransform => { +export const getSeriesIdTransform = (facets: string[]): FormulaTransform => { const expr = facets.map((facet) => `datum.${facet}`).join(' + " | " + '); return { type: 'formula', diff --git a/src/specBuilder/index.ts b/src/specBuilder/index.ts index 09ca1b5d5..758d251dd 100644 --- a/src/specBuilder/index.ts +++ b/src/specBuilder/index.ts @@ -10,4 +10,4 @@ * governing permissions and limitations under the License. */ -export * from './prismSpecBuilder'; +export * from './chartSpecBuilder'; diff --git a/src/specBuilder/legend/legendSpecBuilder.ts b/src/specBuilder/legend/legendSpecBuilder.ts index 93e1767cd..245757c2c 100644 --- a/src/specBuilder/legend/legendSpecBuilder.ts +++ b/src/specBuilder/legend/legendSpecBuilder.ts @@ -9,13 +9,12 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - import { DEFAULT_COLOR_SCHEME } from '@constants'; import { addFieldToFacetScaleDomain } from '@specBuilder/scale/scaleSpecBuilder'; import { getColorValue, getLineWidthPixelsFromLineWidth, - getPathFromPrismSymbolShape, + getPathFromSymbolShape, getStrokeDashFromLineType, } from '@specBuilder/specUtils'; import produce from 'immer'; @@ -59,7 +58,7 @@ export const addLegend = produce< title, colorScheme = DEFAULT_COLOR_SCHEME, ...props - }, + } ) => { const { formattedColor, formattedLineType, formattedLineWidth, formattedSymbolShape } = formatFacetRefsWithPresets(color, lineType, lineWidth, symbolShape, colorScheme); @@ -104,7 +103,7 @@ export const addLegend = produce< }; spec.legends = [legend]; - }, + } ); /** @@ -120,7 +119,7 @@ export const formatFacetRefsWithPresets = ( lineType: LineTypeFacet | undefined, lineWidth: LineWidthFacet | undefined, symbolShape: SymbolShapeFacet | undefined, - colorScheme: ColorScheme, + colorScheme: ColorScheme ) => { let formattedColor: FacetRef | undefined; if (color && typeof color === 'object') { @@ -145,7 +144,7 @@ export const formatFacetRefsWithPresets = ( let formattedSymbolShape: FacetRef | undefined; if (symbolShape && typeof symbolShape === 'object') { - formattedSymbolShape = { value: getPathFromPrismSymbolShape(symbolShape.value) }; + formattedSymbolShape = { value: getPathFromSymbolShape(symbolShape.value) }; } else { formattedSymbolShape = symbolShape; } @@ -190,7 +189,7 @@ const addLegendEntriesScale = produce( type: 'ordinal', domain: { data: 'legendAggregate', field: 'legendEntries' }, }); - }, + } ); const addMarks = produce((marks, { highlight }) => { @@ -238,5 +237,5 @@ export const addSignals = produce( signals.push(getLegendLabelsSeriesSignal(legendLabels)); } } - }, + } ); diff --git a/src/specBuilder/marks/markUtils.ts b/src/specBuilder/marks/markUtils.ts index 19866ce24..55ae95a13 100644 --- a/src/specBuilder/marks/markUtils.ts +++ b/src/specBuilder/marks/markUtils.ts @@ -59,7 +59,7 @@ export function getInteractive(children: MarkChildElement[]): boolean { export function getTooltip(children: MarkChildElement[], name: string, nestedDatum?: boolean): SignalRef | undefined { // skip annotations if (hasTooltip(children)) { - return { signal: `merge(datum${nestedDatum ? '.datum' : ''}, {'prismComponentName': '${name}'})` }; + return { signal: `merge(datum${nestedDatum ? '.datum' : ''}, {'rscComponentName': '${name}'})` }; } } diff --git a/src/specBuilder/signal/signalSpecBuilder.test.ts b/src/specBuilder/signal/signalSpecBuilder.test.ts index 9879d6c5b..77f1eb23a 100644 --- a/src/specBuilder/signal/signalSpecBuilder.test.ts +++ b/src/specBuilder/signal/signalSpecBuilder.test.ts @@ -26,7 +26,7 @@ export const defaultHighlightSignal: Signal = { ], }; -describe('Prism spec builder', () => { +describe('Signal spec builder', () => { describe('getUncontrolledHoverSignal()', () => { test('not nested', () => { expect(getUncontrolledHoverSignal('bar0')).toStrictEqual({ diff --git a/src/specBuilder/signal/signalSpecBuilder.ts b/src/specBuilder/signal/signalSpecBuilder.ts index ec1f8ed58..0c57bc59b 100644 --- a/src/specBuilder/signal/signalSpecBuilder.ts +++ b/src/specBuilder/signal/signalSpecBuilder.ts @@ -40,7 +40,7 @@ export const getUncontrolledHoverSignal = (name: string, nestedDatum?: boolean): /** * Returns a controlled hover signal. - * Controlled hover signals get manually updated via the view in Prism.tsx + * Controlled hover signals get manually updated via the view in Chart.tsx */ export const getControlledHoverSignal = (name: string): Signal => { return { diff --git a/src/specBuilder/specUtils.test.ts b/src/specBuilder/specUtils.test.ts index bb7031b1c..50c40fc9c 100644 --- a/src/specBuilder/specUtils.test.ts +++ b/src/specBuilder/specUtils.test.ts @@ -9,7 +9,6 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - import { DEFAULT_COLOR, DEFAULT_SECONDARY_COLOR, TABLE } from '@constants'; import { ROUNDED_SQUARE_PATH } from 'svgPaths'; import { BandScale, OrdinalScale } from 'vega'; @@ -19,7 +18,7 @@ import { getFacetsFromProps, getFacetsFromScales, getLineWidthPixelsFromLineWidth, - getPathFromPrismSymbolShape, + getPathFromSymbolShape, getStrokeDashFromLineType, } from './specUtils'; @@ -78,7 +77,7 @@ describe('specUtils', () => { getFacetsFromScales([ defaultColorScale, { ...defaultLineTypeScale, domain: { data: TABLE, fields: [DEFAULT_COLOR] } }, - ]), + ]) ).toStrictEqual([DEFAULT_COLOR]); expect(getFacetsFromScales([defaultColorScale, defaultLineTypeScale, defaultOpacityScale])).toStrictEqual([ DEFAULT_COLOR, @@ -96,7 +95,7 @@ describe('specUtils', () => { test('should return empty array if no scales have fields', () => { expect(getFacetsFromScales([{ ...defaultColorScale, domain: { data: TABLE, fields: [] } }])).toStrictEqual( - [], + [] ); }); @@ -150,15 +149,15 @@ describe('specUtils', () => { }); }); - describe('getPathFromPrismSymbolShape()', () => { + describe('getPathFromSymbolShape()', () => { test('return rounded square path for rounded-square', () => { - expect(getPathFromPrismSymbolShape('rounded-square')).toBe(ROUNDED_SQUARE_PATH); + expect(getPathFromSymbolShape('rounded-square')).toBe(ROUNDED_SQUARE_PATH); }); test('return input unless input is rounded-square', () => { - expect(getPathFromPrismSymbolShape('circle')).toBe('circle'); + expect(getPathFromSymbolShape('circle')).toBe('circle'); }); test('return input unless input is rounded-square', () => { - expect(getPathFromPrismSymbolShape('abc123')).toBe('abc123'); + expect(getPathFromSymbolShape('abc123')).toBe('abc123'); }); }); }); diff --git a/src/specBuilder/specUtils.ts b/src/specBuilder/specUtils.ts index 2cec14619..58f00d87c 100644 --- a/src/specBuilder/specUtils.ts +++ b/src/specBuilder/specUtils.ts @@ -12,6 +12,7 @@ import { spectrumColors } from '@themes'; import { DATE_PATH, ROUNDED_SQUARE_PATH } from 'svgPaths'; import { + ChartSymbolShape, ColorFacet, ColorScheme, DualFacet, @@ -20,7 +21,6 @@ import { LineTypeFacet, LineWidth, OpacityFacet, - PrismSymbolShape, SpectrumColor, } from 'types'; import { Data, Scale, Spec, ValuesData } from 'vega'; @@ -144,11 +144,11 @@ export const getLineWidthPixelsFromLineWidth = (lineWidth: LineWidth): number => }; /** - * get the SVG path for the custom prism symbol shape - * @param symbolShape - * @returns SVG path or the passed in symbolShape if it is not a supported shape. + * get the SVG path for the symbol shape + * @param symbolShape supported shape name or custom SVG path + * @returns SVG path */ -export const getPathFromPrismSymbolShape = (symbolShape: PrismSymbolShape): string => { +export const getPathFromSymbolShape = (symbolShape: ChartSymbolShape): string => { if (symbolShape === 'rounded-square') return ROUNDED_SQUARE_PATH; return symbolShape; }; @@ -174,14 +174,14 @@ export const baseData: Data[] = [ ]; /** - * Merges an optionally supplied spec with Prism props and default values. + * Merges an optionally supplied spec with Chart props and default values. * * @param spec - The spec to merge with the base spec. If none is supplied, the base spec is returned. - * @param prismProps - A partial set of prism props to spread on to the spec. + * @param chartProps - A partial set of chart props to spread on to the spec. * @returns Spec with default values */ -export const initializeSpec = (spec: Spec | null = {}, prismProps: Partial = {}): Spec => { - const { title, description, data } = prismProps; +export const initializeSpec = (spec: Spec | null = {}, chartProps: Partial = {}): Spec => { + const { title, description, data } = chartProps; const baseSpec: Spec = { title: title || undefined, diff --git a/src/specBuilder/trendline/trendlineUtils.ts b/src/specBuilder/trendline/trendlineUtils.ts index 84fcbde09..544ee9432 100644 --- a/src/specBuilder/trendline/trendlineUtils.ts +++ b/src/specBuilder/trendline/trendlineUtils.ts @@ -11,7 +11,7 @@ */ import { Trendline } from '@components/Trendline'; import { FILTERED_TABLE, MARK_ID, SERIES_ID, TRENDLINE_VALUE } from '@constants'; -import { getPrismSeriesIdTransform } from '@specBuilder/data/dataUtils'; +import { getSeriesIdTransform } from '@specBuilder/data/dataUtils'; import { getLineHoverMarks, getLineMark } from '@specBuilder/line/lineUtils'; import { hasInteractiveChildren, hasPopover, hasTooltip } from '@specBuilder/marks/markUtils'; import { @@ -183,7 +183,7 @@ export const getTrendlineData = (markProps: BarSpecProps | LineSpecProps): Sourc transform: [ ...dimensionRangeTransforms, ...getTrendlineStatisticalTransforms(markProps, trendlineProps), - getPrismSeriesIdTransform(facets), + getSeriesIdTransform(facets), ], }); if (hasInteractiveChildren(trendlineChildren)) { diff --git a/src/stories/Prism.story.css b/src/stories/Chart.story.css similarity index 100% rename from src/stories/Prism.story.css rename to src/stories/Chart.story.css diff --git a/src/stories/Prism.story.tsx b/src/stories/Chart.story.tsx similarity index 75% rename from src/stories/Prism.story.tsx rename to src/stories/Chart.story.tsx index a97571516..108aa49e3 100644 --- a/src/stories/Prism.story.tsx +++ b/src/stories/Chart.story.tsx @@ -9,20 +9,20 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Line, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Chart, Line } from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; -import React, { ReactElement } from 'react'; -import './Prism.story.css'; -import { PrismBarStory } from './PrismBarStory'; +import './Chart.story.css'; +import { ChartBarStory } from './ChartBarStory'; import { data } from './data/data'; export default { - title: 'Prism/Prism', - component: Prism, + title: 'RSC/Chart', + component: Chart, argTypes: {}, parameters: { docs: { @@ -33,23 +33,23 @@ export default { }, }; -const PrismLineStory: ComponentStory = (args): ReactElement => { - const props = usePrismProps(args); +const ChartLineStory: ComponentStory = (args): ReactElement => { + const props = useChartProps(args); return ( - + - + ); }; -const Basic = bindWithProps(PrismLineStory); +const Basic = bindWithProps(ChartLineStory); // Story specific props are passed here Basic.args = { data, renderer: 'svg', height: 300 }; -const Config = bindWithProps(PrismBarStory); +const Config = bindWithProps(ChartBarStory); Config.args = { config: { rect: { @@ -59,7 +59,7 @@ Config.args = { data, }; -const Width = bindWithProps(PrismBarStory); +const Width = bindWithProps(ChartBarStory); Width.args = { width: '50%', minWidth: 300, diff --git a/src/stories/Prism.test.tsx b/src/stories/Chart.test.tsx similarity index 82% rename from src/stories/Prism.test.tsx rename to src/stories/Chart.test.tsx index 3ce835d37..c181df7c3 100644 --- a/src/stories/Prism.test.tsx +++ b/src/stories/Chart.test.tsx @@ -12,31 +12,31 @@ import React, { createRef } from 'react'; import '@matchMediaMock'; -import { Axis, Bar, ChartTooltip, Line, Prism, PrismHandle } from '@prism'; -import { findPrism, getAllMarksByGroupName, render, screen } from '@test-utils'; +import { Axis, Bar, Chart, ChartHandle, ChartTooltip, Line } from '@rsc'; +import { findChart, getAllMarksByGroupName, render, screen } from '@test-utils'; import { getElement } from '@utils'; -import { Basic, Config, Width } from './Prism.story'; +import { Basic, Config, Width } from './Chart.story'; import { CssColors, SpectrumColorNames, SpectrumDivergentColorScheme, SpectrumSequentialColorScheme, -} from './PrismColors.story'; -import { EmptyState, LoadingState } from './PrismStates.story'; +} from './ChartColors.story'; +import { EmptyState, LoadingState } from './ChartStates.story'; import { data } from './data/data'; const PopoverTest = ( - + - + ); -describe('Prism', () => { +describe('Chart', () => { test('Basic renders properly', async () => { render(); const view = await screen.findByRole('graphics-document'); @@ -71,9 +71,9 @@ describe('Prism', () => { test('Spectrum colors render correctly (light)', async () => { render(); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars[0].getAttribute('fill')).toEqual('rgb(34, 34, 34)'); expect(bars[1].getAttribute('fill')).toEqual('rgb(70, 70, 70)'); @@ -84,9 +84,9 @@ describe('Prism', () => { test('Spectrum colors render correctly (dark)', async () => { render(); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars[0].getAttribute('fill')).toEqual('rgb(235, 235, 235)'); expect(bars[1].getAttribute('fill')).toEqual('rgb(208, 208, 208)'); @@ -97,9 +97,9 @@ describe('Prism', () => { test('Spectrum diverging color scheme renders correctly', async () => { render(); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars[0].getAttribute('fill')).toEqual('rgb(88, 0, 0)'); expect(bars[1].getAttribute('fill')).toEqual('rgb(221, 134, 41)'); @@ -110,9 +110,9 @@ describe('Prism', () => { test('Spectrum sequential color scheme renders correctly', async () => { render(); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars[0].getAttribute('fill')).toEqual('rgb(113, 213, 202)'); expect(bars[1].getAttribute('fill')).toEqual('rgb(234, 255, 241)'); @@ -123,9 +123,9 @@ describe('Prism', () => { test('CSS colors renders correctly', async () => { render(); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars[0].getAttribute('fill')).toEqual('purple'); expect(bars[1].getAttribute('fill')).toEqual('rgb(38, 142, 108)'); @@ -150,18 +150,18 @@ describe('Prism', () => { describe('Handles', () => { test('Copy and download resolve/reject', async () => { - const ref = createRef(); + const ref = createRef(); render( - + - + ); if (ref.current) { // should reject since the chart isn't done rendering await expect(ref.current.copy()).rejects.toBe("There isn't a chart to copy, copy to clipboard failed"); await expect(ref.current.download()).rejects.toBe("There isn't a chart to download, download failed"); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // should reject because fetch isn't mocked await expect(ref.current.copy()).rejects.toBe( 'Error occurred while fetching image, copy to clipboard failed' @@ -171,17 +171,17 @@ describe('Prism', () => { } }); test('download uses supplied filename', async () => { - const ref = createRef(); + const ref = createRef(); render( - + - + ); if (ref.current) { // should reject since the chart isn't done rendering await expect(ref.current.download()).rejects.toBe("There isn't a chart to download, download failed"); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // should resolve await expect(ref.current.download('My filename')).resolves.toBe('Chart downloaded as My filename.png'); } diff --git a/src/stories/PrismBarStory.tsx b/src/stories/ChartBarStory.tsx similarity index 79% rename from src/stories/PrismBarStory.tsx rename to src/stories/ChartBarStory.tsx index 2b0a3225e..b88b64574 100644 --- a/src/stories/PrismBarStory.tsx +++ b/src/stories/ChartBarStory.tsx @@ -9,19 +9,19 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Bar, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Bar, Chart } from '@rsc'; import { ComponentStory } from '@storybook/react'; -import React, { ReactElement } from 'react'; -export const PrismBarStory: ComponentStory = (args): ReactElement => { - const props = usePrismProps(args); +export const ChartBarStory: ComponentStory = (args): ReactElement => { + const props = useChartProps(args); return ( - + - + ); }; diff --git a/src/stories/PrismColors.story.tsx b/src/stories/ChartColors.story.tsx similarity index 79% rename from src/stories/PrismColors.story.tsx rename to src/stories/ChartColors.story.tsx index 4ee040f43..c87567d21 100644 --- a/src/stories/PrismColors.story.tsx +++ b/src/stories/ChartColors.story.tsx @@ -9,16 +9,15 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -import { Prism } from '@prism'; +import { Chart } from '@rsc'; import { bindWithProps } from '@test-utils'; -import { PrismBarStory } from './PrismBarStory'; +import { ChartBarStory } from './ChartBarStory'; import { data } from './data/data'; export default { - title: 'Prism/Prism/Colors', - component: Prism, + title: 'RSC/Chart/Colors', + component: Chart, argTypes: {}, parameters: { docs: { @@ -29,25 +28,25 @@ export default { }, }; -const SpectrumColorNames = bindWithProps(PrismBarStory); +const SpectrumColorNames = bindWithProps(ChartBarStory); SpectrumColorNames.args = { colors: ['gray-800', 'gray-700', 'gray-600', 'gray-500'], data, }; -const SpectrumDivergentColorScheme = bindWithProps(PrismBarStory); +const SpectrumDivergentColorScheme = bindWithProps(ChartBarStory); SpectrumDivergentColorScheme.args = { colors: 'divergentOrangeYellowSeafoam5', data, }; -const SpectrumSequentialColorScheme = bindWithProps(PrismBarStory); +const SpectrumSequentialColorScheme = bindWithProps(ChartBarStory); SpectrumSequentialColorScheme.args = { colors: 'sequentialCerulean5', data, }; -const CssColors = bindWithProps(PrismBarStory); +const CssColors = bindWithProps(ChartBarStory); CssColors.args = { colors: ['purple', 'rgb(38, 142, 108)', '#0d66d0', 'hsl(32deg, 86%, 46%)'], data, diff --git a/src/stories/PrismExamples.story.tsx b/src/stories/ChartExamples.story.tsx similarity index 89% rename from src/stories/PrismExamples.story.tsx rename to src/stories/ChartExamples.story.tsx index dc17b4611..258719540 100644 --- a/src/stories/PrismExamples.story.tsx +++ b/src/stories/ChartExamples.story.tsx @@ -14,23 +14,23 @@ import React, { Dispatch, ReactElement, SetStateAction, useState } from 'react'; import { Annotation } from '@components/Annotation'; import { ReferenceLine } from '@components/ReferenceLine'; import { TRENDLINE_VALUE } from '@constants'; -import usePrismProps from '@hooks/usePrismProps'; +import useChartProps from '@hooks/useChartProps'; import { Area, Axis, Bar, + Chart, ChartPopover, ChartTooltip, Legend, Line, - Prism, Title, Trendline, categorical16, -} from '@prism'; +} from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; -import { Colors, Datum, LegendDescription, LegendLabel, PrismData, PrismProps, SpectrumColor, SubLabel } from 'types'; +import { ChartData, ChartProps, Colors, Datum, LegendDescription, LegendLabel, SpectrumColor, SubLabel } from 'types'; import { ActionButton, ActionGroup, Content, Divider, Flex, Item, Text, View } from '@adobe/react-spectrum'; import Close from '@spectrum-icons/workflow/Close'; @@ -51,8 +51,8 @@ import stackOverflowData from './data/stackOverflowTrends.json'; import { trendsTimeComparisonData } from './data/trendsTimeComparisonData'; export default { - title: 'Prism/Prism/Examples', - component: Prism, + title: 'RSC/Chart/Examples', + component: Chart, argTypes: {}, parameters: { docs: { @@ -103,10 +103,10 @@ const funnelTimeCompareLegendLabels: LegendLabel[] = [ { seriesName: 'US | Last 4 weeks | retained', label: 'US | Last 4 weeks ' }, ]; -const UserGrowthBarStory: ComponentStory = (args): ReactElement => { - const props = usePrismProps(args); +const UserGrowthBarStory: ComponentStory = (args): ReactElement => { + const props = useChartProps(args); return ( - + @@ -114,14 +114,14 @@ const UserGrowthBarStory: ComponentStory = (args): ReactElement => {dialogCallback} - + ); }; -const UserGrowthBarTimeComparisonStory: ComponentStory = (args): ReactElement => { - const props = usePrismProps(args); +const UserGrowthBarTimeComparisonStory: ComponentStory = (args): ReactElement => { + const props = useChartProps(args); return ( - + = (args): R {dialogCallback} - + ); }; -const UserGrowthAreaStory: ComponentStory = (args): ReactElement => { - const props = usePrismProps(args); +const UserGrowthAreaStory: ComponentStory = (args): ReactElement => { + const props = useChartProps(args); return ( - + @@ -154,7 +154,7 @@ const UserGrowthAreaStory: ComponentStory = (args): ReactElement = {dialogCallback} - + ); }; @@ -202,24 +202,24 @@ const dialogCallback = (datum: Datum, close?: () => void) => { ); }; -const FunnelConversionStory: ComponentStory = (args): ReactElement => { - const props = usePrismProps(args); +const FunnelConversionStory: ComponentStory = (args): ReactElement => { + const props = useChartProps(args); return ( - + - + ); }; -const FunnelTimeComparisonStory: ComponentStory = (args): ReactElement => { - const props = usePrismProps(args); +const FunnelTimeComparisonStory: ComponentStory = (args): ReactElement => { + const props = useChartProps(args); return ( - + = (args): ReactEle ]} legendLabels={funnelTimeCompareLegendLabels} /> - + ); }; -const ReleaseImpactStory: ComponentStory = (args): ReactElement => { - const props = usePrismProps(args); +const ReleaseImpactStory: ComponentStory = (args): ReactElement => { + const props = useChartProps(args); const subLabels: SubLabel[] = [ { value: -14, subLabel: 'Days before', align: 'start', fontWeight: 'bold' }, @@ -270,7 +270,7 @@ const ReleaseImpactStory: ComponentStory = (args): ReactElement => }; return ( - + @@ -286,15 +286,15 @@ const ReleaseImpactStory: ComponentStory = (args): ReactElement => - + ); }; -const getReleaseImpactBar = (series: string, prismProps: PrismProps, isSingleSeries: boolean) => { +const getReleaseImpactBar = (series: string, chartProps: ChartProps, isSingleSeries: boolean) => { return ( <>
{/* Spacer */} - + - </Prism> + </Chart> </> ); }; -const ReleaseImpactBarStory: ComponentStory<typeof Prism> = (args): ReactElement => { +const ReleaseImpactBarStory: ComponentStory<typeof Chart> = (args): ReactElement => { const [highlightedSeries, setHighlightedSeries]: [string, Dispatch<SetStateAction<string>>] = useState(''); const [hiddenSeries, setHiddenSeries]: [string[] | undefined, Dispatch<SetStateAction<string[] | undefined>>] = useState(); @@ -379,25 +379,25 @@ const ReleaseImpactBarStory: ComponentStory<typeof Prism> = (args): ReactElement const isSingleSeries = displayedSeriesCount.length === 1; - const props = usePrismProps({ ...args, hiddenSeries, highlightedSeries }); - const firstSeriesProps = usePrismProps({ + const props = useChartProps({ ...args, hiddenSeries, highlightedSeries }); + const firstSeriesProps = useChartProps({ ...args, - data: firstSeriesData as PrismData[], + data: firstSeriesData as ChartData[], hiddenSeries, highlightedSeries, height: isSingleSeries ? 500 : 250, }); - const secondSeriesProps = usePrismProps({ + const secondSeriesProps = useChartProps({ ...args, - data: secondSeriesData as PrismData[], + data: secondSeriesData as ChartData[], colors: ['categorical-200'], hiddenSeries, highlightedSeries, height: isSingleSeries ? 500 : 250, }); - const thirdSeriesProps = usePrismProps({ + const thirdSeriesProps = useChartProps({ ...args, - data: thirdSeriesData as PrismData[], + data: thirdSeriesData as ChartData[], colors: ['categorical-300'], hiddenSeries, highlightedSeries, @@ -416,20 +416,20 @@ const ReleaseImpactBarStory: ComponentStory<typeof Prism> = (args): ReactElement {displayThirdSeries && getReleaseImpactBar(thirdSeriesKey, thirdSeriesProps, isSingleSeries)} {/* Legend */} - <Prism {...props} height={50}> + <Chart {...props} height={50}> <Legend color={'series'} onClick={onLegendClick} onMouseOut={onLegendMouseOut} onMouseOver={onLegendMouseOver} /> - </Prism> + </Chart> </> ); }; -const TrendsTimeComparisonLineStory: ComponentStory<typeof Prism> = (args): ReactElement => { - const props = usePrismProps(args); +const TrendsTimeComparisonLineStory: ComponentStory<typeof Chart> = (args): ReactElement => { + const props = useChartProps(args); const legendLabels = [ { seriesName: 'add-freeform-table-0 | Previous 4 weeks', label: 'Add Freeform table | Previous 4 weeks' }, { seriesName: 'add-freeform-table-0 | Last 4 weeks', label: 'Add Freeform table | Last 4 weeks' }, @@ -437,17 +437,17 @@ const TrendsTimeComparisonLineStory: ComponentStory<typeof Prism> = (args): Reac { seriesName: 'add-line-viz-1 | Last 4 weeks', label: 'Add Line Viz | Last 4 weeks' }, ]; return ( - <Prism {...props}> + <Chart {...props}> <Axis position="bottom" ticks baseline labelFormat="time" /> <Axis position="left" grid title="Events" /> <Line color="series" lineType="period" scaleType="time" /> <Legend highlight legendLabels={legendLabels} opacity="period" /> - </Prism> + </Chart> ); }; -const TrendsTimeComparisonBarStory: ComponentStory<typeof Prism> = (args): ReactElement => { - const props = usePrismProps(args); +const TrendsTimeComparisonBarStory: ComponentStory<typeof Chart> = (args): ReactElement => { + const props = useChartProps(args); const legendLabels = [ { seriesName: 'add-freeform-table-0 | Previous 4 weeks', label: 'Add Freeform table | Previous 4 weeks' }, { seriesName: 'add-freeform-table-0 | Last 4 weeks', label: 'Add Freeform table | Last 4 weeks' }, @@ -455,7 +455,7 @@ const TrendsTimeComparisonBarStory: ComponentStory<typeof Prism> = (args): React { seriesName: 'add-line-viz-1 | Last 4 weeks', label: 'Add Line Viz | Last 4 weeks' }, ]; return ( - <Prism {...props}> + <Chart {...props}> <Axis position="bottom" ticks baseline labelFormat="time" /> <Axis position="left" grid title="Events" /> <Bar @@ -468,12 +468,12 @@ const TrendsTimeComparisonBarStory: ComponentStory<typeof Prism> = (args): React paddingRatio={0.2} /> <Legend highlight legendLabels={legendLabels} /> - </Prism> + </Chart> ); }; -const TrendsTimeComparisonStackedBarStory: ComponentStory<typeof Prism> = (args): ReactElement => { - const props = usePrismProps(args); +const TrendsTimeComparisonStackedBarStory: ComponentStory<typeof Chart> = (args): ReactElement => { + const props = useChartProps(args); const legendLabels = [ { seriesName: 'add-freeform-table-0 | Previous 4 weeks', label: 'Add Freeform table | Previous 4 weeks' }, { seriesName: 'add-freeform-table-0 | Last 4 weeks', label: 'Add Freeform table | Last 4 weeks' }, @@ -481,7 +481,7 @@ const TrendsTimeComparisonStackedBarStory: ComponentStory<typeof Prism> = (args) { seriesName: 'add-line-viz-1 | Last 4 weeks', label: 'Add Line Viz | Last 4 weeks' }, ]; return ( - <Prism {...props} colors={categorical16} opacities={[[0.5, 1]]} lineTypes={[['shortDash', 'solid']]}> + <Chart {...props} colors={categorical16} opacities={[[0.5, 1]]} lineTypes={[['shortDash', 'solid']]}> <Axis position="bottom" ticks baseline labelFormat="time" /> <Axis position="left" grid title="Events" /> <Bar @@ -494,18 +494,18 @@ const TrendsTimeComparisonStackedBarStory: ComponentStory<typeof Prism> = (args) paddingRatio={0.2} /> <Legend highlight legendLabels={legendLabels} /> - </Prism> + </Chart> ); }; -const StackOverflowStory: ComponentStory<typeof Prism> = (args): ReactElement => { - const props = usePrismProps(args); +const StackOverflowStory: ComponentStory<typeof Chart> = (args): ReactElement => { + const props = useChartProps(args); return ( - <Prism {...props}> + <Chart {...props}> <Axis position="left" grid title="Page Views" /> <Axis position="bottom" baseline ticks labelFormat="time" granularity="month" /> <Line dimension="timestamp" metric="rollingAveragePageViews" /> - </Prism> + </Chart> ); }; diff --git a/src/stories/PrismExamples.test.tsx b/src/stories/ChartExamples.test.tsx similarity index 76% rename from src/stories/PrismExamples.test.tsx rename to src/stories/ChartExamples.test.tsx index d9780a3fc..0f60184d0 100644 --- a/src/stories/PrismExamples.test.tsx +++ b/src/stories/ChartExamples.test.tsx @@ -9,11 +9,12 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; import '@matchMediaMock'; import { + findChart, findMarksByGroupName, - findPrism, getAllLegendEntries, getAllMarksByGroupName, getMarksByGroupName, @@ -21,7 +22,6 @@ import { render, screen, } from '@test-utils'; -import React from 'react'; import { FunnelConversion, @@ -30,7 +30,7 @@ import { TrendsTimeComparisonBar, TrendsTimeComparisonStackedBar, UserGrowthTimeComparisonBarGrowth, -} from './PrismExamples.story'; +} from './ChartExamples.story'; function testBarOpacity(bar: HTMLElement, opacity: string) { expect(bar).toHaveAttribute('fill-opacity', opacity); @@ -46,13 +46,13 @@ describe('Funnel stories', () => { test('legend should only have 2 items in it', async () => { render(<FunnelConversion {...FunnelConversion.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars).toHaveLength(12); - const legendEntries = getAllLegendEntries(prism); + const legendEntries = getAllLegendEntries(chart); expect(legendEntries).toHaveLength(2); expect(screen.getByText('All users')).toBeInTheDocument(); @@ -66,10 +66,10 @@ describe('Time comparison stories', () => { test('historical series should have special style', async () => { render(<TrendsTimeComparisonBar {...TrendsTimeComparisonBar.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars).toHaveLength(112); testBarOpacity(bars[0], '0.5'); @@ -79,10 +79,10 @@ describe('Time comparison stories', () => { test('current series should have typical style', async () => { render(<TrendsTimeComparisonBar {...TrendsTimeComparisonBar.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars).toHaveLength(112); testBarOpacity(bars[1], '1'); @@ -94,10 +94,10 @@ describe('Time comparison stories', () => { test('historical series should have special style', async () => { render(<FunnelTimeComparison {...FunnelTimeComparison.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars).toHaveLength(24); testBarOpacity(bars[0], '0.5'); @@ -111,10 +111,10 @@ describe('Time comparison stories', () => { test('current series should have typical style', async () => { render(<FunnelTimeComparison {...FunnelTimeComparison.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars).toHaveLength(24); testBarOpacity(bars[1], '1'); @@ -130,20 +130,20 @@ describe('Time comparison stories', () => { test('has correct number of bars', async () => { render(<UserGrowthTimeComparisonBarGrowth {...UserGrowthTimeComparisonBarGrowth.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars).toHaveLength(48); }); test('historical series should have special style', async () => { render(<UserGrowthTimeComparisonBarGrowth {...UserGrowthTimeComparisonBarGrowth.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const bars = getAllMarksByGroupName(chart, 'bar0'); // previous period April for (let i = 0; i <= 3; i++) { @@ -161,10 +161,10 @@ describe('Time comparison stories', () => { test('current series should have typical style', async () => { render(<UserGrowthTimeComparisonBarGrowth {...UserGrowthTimeComparisonBarGrowth.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const bars = getAllMarksByGroupName(chart, 'bar0'); // last period April for (let i = 4; i <= 7; i++) { @@ -185,10 +185,10 @@ describe('Time comparison stories', () => { test('historical series should have special style', async () => { render(<TrendsTimeComparisonStackedBar {...TrendsTimeComparisonStackedBar.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars).toHaveLength(112); testBarOpacity(bars[0], '0.5'); @@ -198,10 +198,10 @@ describe('Time comparison stories', () => { test('current series should have typical style', async () => { render(<TrendsTimeComparisonStackedBar {...TrendsTimeComparisonStackedBar.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const bars = getAllMarksByGroupName(chart, 'bar0'); expect(bars).toHaveLength(112); testBarOpacity(bars[1], '1'); @@ -213,21 +213,21 @@ describe('Time comparison stories', () => { test('should have release line and icon on chart', async () => { render(<ReleaseImpact {...ReleaseImpact.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const releaseLine = getMarksByGroupName(prism, 'axis0_xReferenceLineRule0', 'line'); + const releaseLine = getMarksByGroupName(chart, 'axis0_xReferenceLineRule0', 'line'); expect(releaseLine).toBeInTheDocument(); - const releaseIcon = getMarksByGroupName(prism, 'axis0_xReferenceLineSymbol0'); + const releaseIcon = getMarksByGroupName(chart, 'axis0_xReferenceLineSymbol0'); expect(releaseIcon).toBeInTheDocument(); }); test('should have subleabels with correct styling', async () => { render(<ReleaseImpact {...ReleaseImpact.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); const daysBeforeLabel = screen.getByText('Days before'); expect(daysBeforeLabel).toBeInTheDocument(); @@ -248,18 +248,18 @@ describe('Time comparison stories', () => { test('hovering the average lines should show tooltips', async () => { render(<ReleaseImpact {...ReleaseImpact.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const averageLines = getAllMarksByGroupName(prism, 'line0Trendline_voronoi'); + const averageLines = getAllMarksByGroupName(chart, 'line0Trendline_voronoi'); expect(averageLines).toHaveLength(28); await hoverNthElement(averageLines, 0); - const tooltip = await screen.findByTestId('prism-tooltip'); + const tooltip = await screen.findByTestId('rsc-tooltip'); expect(tooltip).toBeInTheDocument(); expect(screen.getByText(0.58)).toBeInTheDocument(); - expect(await findMarksByGroupName(prism, 'line0Trendline_point')).toBeInTheDocument(); - expect(await findMarksByGroupName(prism, 'line0Trendline_secondaryPoint')).toBeInTheDocument(); + expect(await findMarksByGroupName(chart, 'line0Trendline_point')).toBeInTheDocument(); + expect(await findMarksByGroupName(chart, 'line0Trendline_secondaryPoint')).toBeInTheDocument(); }); }); }); diff --git a/src/stories/PrismHandles.story.tsx b/src/stories/ChartHandles.story.tsx similarity index 81% rename from src/stories/PrismHandles.story.tsx rename to src/stories/ChartHandles.story.tsx index ecfd092cf..7eb861c1b 100644 --- a/src/stories/PrismHandles.story.tsx +++ b/src/stories/ChartHandles.story.tsx @@ -9,20 +9,21 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement, useRef, useState } from 'react'; -import { ActionButton, Content, Flex } from '@adobe/react-spectrum'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Line, Prism, PrismHandle } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Chart, ChartHandle, Line } from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; -import React, { ReactElement, useRef, useState } from 'react'; -import './Prism.story.css'; +import { ActionButton, Content, Flex } from '@adobe/react-spectrum'; + +import './Chart.story.css'; import { data } from './data/data'; export default { - title: 'Prism/Prism/Handles', - component: Prism, + title: 'RSC/Chart/Handles', + component: Chart, argTypes: {}, parameters: { docs: { @@ -35,15 +36,15 @@ export default { const HandleStory = ({ variant }: { variant: 'copy' | 'download' }) => { const [loading, setLoading] = useState(false); - const ref = useRef<PrismHandle>(null); - const props = usePrismProps({ data }); + const ref = useRef<ChartHandle>(null); + const props = useChartProps({ data }); return ( <Content> - <Prism {...props} ref={ref} loading={loading}> + <Chart {...props} ref={ref} loading={loading}> <Axis position="bottom" baseline ticks /> <Axis position="left" grid /> <Line dimension="x" metric="y" color="series" scaleType="linear" /> - </Prism> + </Chart> <Flex direction="row" gap="size-100"> <ActionButton onPress={() => ref?.current?.[variant]().then(console.log, console.warn)} @@ -57,11 +58,11 @@ const HandleStory = ({ variant }: { variant: 'copy' | 'download' }) => { ); }; -const CopyStory: ComponentStory<typeof Prism> = (): ReactElement => { +const CopyStory: ComponentStory<typeof Chart> = (): ReactElement => { return <HandleStory variant="copy" />; }; -const DownloadStory: ComponentStory<typeof Prism> = (): ReactElement => { +const DownloadStory: ComponentStory<typeof Chart> = (): ReactElement => { return <HandleStory variant="download" />; }; diff --git a/src/stories/PrismStates.story.tsx b/src/stories/ChartStates.story.tsx similarity index 81% rename from src/stories/PrismStates.story.tsx rename to src/stories/ChartStates.story.tsx index 7109628da..9a2d18dcc 100644 --- a/src/stories/PrismStates.story.tsx +++ b/src/stories/ChartStates.story.tsx @@ -9,15 +9,14 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -import { Prism } from '@prism'; +import { Chart } from '@rsc'; import { bindWithProps } from '@test-utils'; -import { PrismBarStory } from './PrismBarStory'; +import { ChartBarStory } from './ChartBarStory'; export default { - title: 'Prism/Prism/States', - component: Prism, + title: 'RSC/Chart/States', + component: Chart, argTypes: {}, parameters: { docs: { @@ -28,13 +27,13 @@ export default { }, }; -const EmptyState = bindWithProps(PrismBarStory); +const EmptyState = bindWithProps(ChartBarStory); EmptyState.args = { data: [], height: 500, }; -const LoadingState = bindWithProps(PrismBarStory); +const LoadingState = bindWithProps(ChartBarStory); LoadingState.args = { data: [], height: 500, diff --git a/src/stories/PrismUnsafeVega.story.tsx b/src/stories/ChartUnsafeVega.story.tsx similarity index 96% rename from src/stories/PrismUnsafeVega.story.tsx rename to src/stories/ChartUnsafeVega.story.tsx index 71585264c..b8149be29 100644 --- a/src/stories/PrismUnsafeVega.story.tsx +++ b/src/stories/ChartUnsafeVega.story.tsx @@ -9,21 +9,21 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; -import usePrismProps from '@hooks/usePrismProps'; -import { Prism } from '@prism'; +import { TABLE } from '@constants'; +import useChartProps from '@hooks/useChartProps'; +import { Chart } from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; -import React, { ReactElement } from 'react'; import { barData } from './components/Bar/data'; import carsData from './data/cars.json'; import { packedBubbleData } from './data/data'; -import { TABLE } from '@constants'; export default { - title: 'Prism/Prism/UNSAFE_vegaSpec', - component: Prism, + title: 'RSC/Chart/UNSAFE_vegaSpec', + component: Chart, argTypes: {}, parameters: { docs: { @@ -34,9 +34,9 @@ export default { }, }; -const UnsafeVegaSpecStory: ComponentStory<typeof Prism> = (args): ReactElement => { - const prismProps = usePrismProps(args); - return <Prism {...prismProps} debug />; +const UnsafeVegaSpecStory: ComponentStory<typeof Chart> = (args): ReactElement => { + const chartProps = useChartProps(args); + return <Chart {...chartProps} debug />; }; const BasicBar = bindWithProps(UnsafeVegaSpecStory); diff --git a/src/stories/PrismUnsafeVega.test.tsx b/src/stories/ChartUnsafeVega.test.tsx similarity index 74% rename from src/stories/PrismUnsafeVega.test.tsx rename to src/stories/ChartUnsafeVega.test.tsx index ad632610a..887bb7884 100644 --- a/src/stories/PrismUnsafeVega.test.tsx +++ b/src/stories/ChartUnsafeVega.test.tsx @@ -9,13 +9,13 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; import '@matchMediaMock'; -import { findPrism, fireEvent, getAllMarksByGroupName, render, screen, waitFor } from '@test-utils'; +import { findChart, fireEvent, getAllMarksByGroupName, render, screen, waitFor } from '@test-utils'; import { sequentialViridis16 } from '@themes'; -import React from 'react'; -import { BasicBar, PackedBubbleChart } from './PrismUnsafeVega.story'; +import { BasicBar, PackedBubbleChart } from './ChartUnsafeVega.story'; const testFill = (el: HTMLElement, color: string) => { expect(el).toHaveAttribute('fill', color); @@ -30,20 +30,20 @@ describe('UNSAFE_vegaSpec stories', () => { test('has correct number of bars', async () => { render(<BasicBar {...BasicBar.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'mark-rect'); + const bars = getAllMarksByGroupName(chart, 'mark-rect'); expect(bars).toHaveLength(5); }); test('bars have spectrum color theme applied', async () => { render(<BasicBar {...BasicBar.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'mark-rect'); + const bars = getAllMarksByGroupName(chart, 'mark-rect'); // Ensure the default spectrum color theme is applied bars.forEach((bar) => { @@ -54,10 +54,10 @@ describe('UNSAFE_vegaSpec stories', () => { test('existing interaction signals in vega spec still work', async () => { render(<BasicBar {...BasicBar.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'mark-rect'); + const bars = getAllMarksByGroupName(chart, 'mark-rect'); // Make sure signals in the spec are not interfered with fireEvent.mouseOver(bars[0]); @@ -70,20 +70,20 @@ describe('UNSAFE_vegaSpec stories', () => { test('has correct number of bubbles', async () => { render(<PackedBubbleChart {...PackedBubbleChart.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bubbles = getAllMarksByGroupName(prism, 'mark-symbol'); + const bubbles = getAllMarksByGroupName(chart, 'mark-symbol'); expect(bubbles).toHaveLength(16); }); test('bubbles have spectrum color theme applied', async () => { render(<PackedBubbleChart {...PackedBubbleChart.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const bubbles = getAllMarksByGroupName(prism, 'mark-symbol'); + const bubbles = getAllMarksByGroupName(chart, 'mark-symbol'); // Check the bubbles to ensure the sequential color scheme is applied // 16-value gradient with 16 bubbles will match 1:1 @@ -95,11 +95,11 @@ describe('UNSAFE_vegaSpec stories', () => { test('Slider interaction controls are present and can be changed', async () => { render(<PackedBubbleChart {...PackedBubbleChart.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const gravityXSlider = getSlider(prism, 'gravityX'); - const gravityYSlider = getSlider(prism, 'gravityY'); + const gravityXSlider = getSlider(chart, 'gravityX'); + const gravityYSlider = getSlider(chart, 'gravityY'); // slider defaults are properly set expect(gravityXSlider.value).toBe('0.2'); diff --git a/src/stories/components/Annotation/Annotation.story.tsx b/src/stories/components/Annotation/Annotation.story.tsx index ed2f6490e..444060936 100644 --- a/src/stories/components/Annotation/Annotation.story.tsx +++ b/src/stories/components/Annotation/Annotation.story.tsx @@ -9,15 +9,15 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; import { Annotation } from '@components/Annotation/Annotation'; -import usePrismProps from '@hooks/usePrismProps'; -import { Bar, BarProps, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Bar, BarProps, Chart } from '@rsc'; import { ComponentStory } from '@storybook/react'; -import React, { ReactElement } from 'react'; export default { - title: 'Prism/Annotation', + title: 'RSC/Annotation', component: Annotation, argTypes: { children: { @@ -51,13 +51,13 @@ const data = [ const barArgs: BarProps = { dimension: 'browser', order: 'order', color: 'operatingSystem' }; const BarAnnotationStory: ComponentStory<typeof Annotation> = (args): ReactElement => { - const prismProps = usePrismProps({ data: data, width: 600, height: 600 }); + const chartProps = useChartProps({ data: data, width: 600, height: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Bar {...barArgs}> <Annotation {...args} /> </Bar> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Annotation/Annotation.test.tsx b/src/stories/components/Annotation/Annotation.test.tsx index e8153d885..1840c9c37 100644 --- a/src/stories/components/Annotation/Annotation.test.tsx +++ b/src/stories/components/Annotation/Annotation.test.tsx @@ -12,36 +12,35 @@ import React from 'react'; import '@matchMediaMock'; -import { findAllMarksByGroupName, findPrism } from '@test-utils'; -import { act, render } from '@testing-library/react'; +import { act, findAllMarksByGroupName, findChart, render } from '@test-utils'; import { BarChart, FixedWidthBar } from './Annotation.story'; describe('Bar', () => { test('Bar Chart renders properly', async () => { render(<BarChart {...BarChart.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(9); // get text annotations - const labels = await findAllMarksByGroupName(prism, 'bar0_annotationText', 'text'); + const labels = await findAllMarksByGroupName(chart, 'bar0_annotationText', 'text'); expect(labels.length).toEqual(9); }); test('Fixed Width Bar Chart renders properly', async () => { render(<FixedWidthBar {...FixedWidthBar.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(9); // get text annotations - const labels = await findAllMarksByGroupName(prism, 'bar0_annotationText', 'text'); + const labels = await findAllMarksByGroupName(chart, 'bar0_annotationText', 'text'); expect(labels.length).toEqual(9); // backgrounds have width of 48px diff --git a/src/stories/components/Area/Area.story.tsx b/src/stories/components/Area/Area.story.tsx index 19987b5fb..ce74ded4b 100644 --- a/src/stories/components/Area/Area.story.tsx +++ b/src/stories/components/Area/Area.story.tsx @@ -9,15 +9,15 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; -import usePrismProps from '@hooks/usePrismProps'; -import { Area, Axis, Prism, PrismProps } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Area, Axis, Chart, ChartProps } from '@rsc'; import { ComponentStory } from '@storybook/react'; -import React, { ReactElement } from 'react'; import { bindWithProps } from 'test-utils/bindWithProps'; export default { - title: 'Prism/Area', + title: 'RSC/Area', component: Area, argTypes: { /*onClick: { @@ -45,25 +45,25 @@ const data = [ { datetime: 1668409200000, maxTemperature: 64, minTemperature: 43, series: 'Add Fallout' }, ]; -const defaultPrismProps: PrismProps = { data, minWidth: 400, maxWidth: 800, height: 400 }; +const defaultChartProps: ChartProps = { data, minWidth: 400, maxWidth: 800, height: 400 }; const BasicStory: ComponentStory<typeof Area> = (args): ReactElement => { - const prismProps = usePrismProps({ ...defaultPrismProps }); + const chartProps = useChartProps({ ...defaultChartProps }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Area {...args} /> - </Prism> + </Chart> ); }; const AreaTimeStory: ComponentStory<typeof Area> = (args): ReactElement => { - const prismProps = usePrismProps({ ...defaultPrismProps }); + const chartProps = useChartProps({ ...defaultChartProps }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="bottom" labelFormat="time" baseline /> <Axis position="left" title="Temperature (F)" grid /> <Area {...args} /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Area/Area.test.tsx b/src/stories/components/Area/Area.test.tsx index 2b3a3ed82..d9c17f614 100644 --- a/src/stories/components/Area/Area.test.tsx +++ b/src/stories/components/Area/Area.test.tsx @@ -9,14 +9,15 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; import '@matchMediaMock'; -import { Area } from '@prism'; +import { Area } from '@rsc'; import { clickNthElement, findAllMarksByGroupName, + findChart, findMarksByGroupName, - findPrism, hoverNthElement, render, screen, @@ -25,7 +26,6 @@ import { within, } from '@test-utils'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { Basic, BasicFloating, Supreme } from './Area.story'; import { Popover, Basic as StackedBasic, TimeAxis, Tooltip } from './StackedArea.story'; @@ -38,52 +38,52 @@ describe('Area', () => { test('Basic renders properly', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); }); test('Basic Floating renders properly', async () => { render(<BasicFloating {...BasicFloating.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); }); test('Supreme renders properly', async () => { render(<Supreme {...Supreme.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); }); test('Stacked Basic renders properly', async () => { render(<StackedBasic {...StackedBasic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); }); test('Time Axis renders properly', async () => { render(<TimeAxis {...TimeAxis.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); }); test('Area with Tooltip renders properly', async () => { render(<Tooltip {...Tooltip.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get areas - const areas = await findAllMarksByGroupName(prism, 'area0'); + const areas = await findAllMarksByGroupName(chart, 'area0'); // hover and validate all hover interactions await hoverNthElement(areas, 0); - const tooltip = await screen.findByTestId('prism-tooltip'); + const tooltip = await screen.findByTestId('rsc-tooltip'); expect(tooltip).toBeInTheDocument(); expect(within(tooltip).getByText('OS: Windows')).toBeInTheDocument(); expect(areas[1].getAttribute('fill-opacity')).toEqual('0.16'); - const highlightRule = await findMarksByGroupName(prism, 'area0_rule', 'line'); + const highlightRule = await findMarksByGroupName(chart, 'area0_rule', 'line'); expect(highlightRule).toBeInTheDocument(); - const highlightPoint = await findMarksByGroupName(prism, 'area0_point'); + const highlightPoint = await findMarksByGroupName(chart, 'area0_point'); expect(highlightPoint).toBeInTheDocument(); // unhover and validate the highlights go away @@ -95,15 +95,15 @@ describe('Area', () => { test('Area with Popover renders properly', async () => { render(<Popover {...Popover.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get areas - const areas = await findAllMarksByGroupName(prism, 'area0'); + const areas = await findAllMarksByGroupName(chart, 'area0'); // clicking the bar should open the popover await clickNthElement(areas, 0); - const popover = await screen.findByTestId('prism-popover'); + const popover = await screen.findByTestId('rsc-popover'); await waitFor(() => expect(popover).toBeInTheDocument()); // waitFor to give the popover time to make sure it doesn't close // shouldn't close the popover @@ -112,7 +112,7 @@ describe('Area', () => { expect(within(popover).getByText('OS: Windows')).toBeInTheDocument(); // should close the popover - await userEvent.click(prism); + await userEvent.click(chart); await waitFor(() => expect(popover).not.toBeInTheDocument()); }); }); diff --git a/src/stories/components/Area/StackedArea.story.tsx b/src/stories/components/Area/StackedArea.story.tsx index e3fc89eef..60f225ff6 100644 --- a/src/stories/components/Area/StackedArea.story.tsx +++ b/src/stories/components/Area/StackedArea.story.tsx @@ -9,15 +9,15 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; -import usePrismProps from '@hooks/usePrismProps'; -import { Area, Axis, ChartPopover, ChartTooltip, Legend, Prism, PrismProps } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Area, Axis, Chart, ChartPopover, ChartProps, ChartTooltip, Legend } from '@rsc'; import { ComponentStory } from '@storybook/react'; -import React, { ReactElement } from 'react'; import { bindWithProps } from 'test-utils/bindWithProps'; export default { - title: 'Prism/Area/StackedArea', + title: 'RSC/Area/StackedArea', component: Area, argTypes: { /*onClick: { @@ -46,14 +46,14 @@ const data = [ { browser: 'Safari', value: 0, operatingSystem: 'Mac', order: 1 }, { browser: 'Safari', value: 1, operatingSystem: 'Other', order: 0 }, ]; -const defaultPrismProps: PrismProps = { data, minWidth: 400, maxWidth: 800, height: 400 }; +const defaultChartProps: ChartProps = { data, minWidth: 400, maxWidth: 800, height: 400 }; const AreaStory: ComponentStory<typeof Area> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Area {...args} /> - </Prism> + </Chart> ); }; @@ -75,35 +75,35 @@ const timeData = [ ]; const AreaTimeStory: ComponentStory<typeof Area> = (args): ReactElement => { - const prismProps = usePrismProps({ ...defaultPrismProps, data: timeData }); + const chartProps = useChartProps({ ...defaultChartProps, data: timeData }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="bottom" labelFormat="time" baseline /> <Axis position="left" grid /> <Area {...args} /> <Legend /> - </Prism> + </Chart> ); }; const TooltipStory: ComponentStory<typeof Area> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="bottom" baseline /> <Axis position="left" grid /> <Area {...args}> <ChartTooltip>{dialog}</ChartTooltip> </Area> <Legend /> - </Prism> + </Chart> ); }; const PopoverStory: ComponentStory<typeof Area> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="bottom" baseline /> <Axis position="left" grid /> <Area {...args}> @@ -111,7 +111,7 @@ const PopoverStory: ComponentStory<typeof Area> = (args): ReactElement => { <ChartPopover>{dialog}</ChartPopover> </Area> <Legend highlight /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Axis/Axis.story.tsx b/src/stories/components/Axis/Axis.story.tsx index 92909e648..7e4d4a2fe 100644 --- a/src/stories/components/Axis/Axis.story.tsx +++ b/src/stories/components/Axis/Axis.story.tsx @@ -9,20 +9,20 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; import { DEFAULT_GRANULARITY } from '@constants'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Bar, ChartTooltip, Line, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Bar, Chart, ChartTooltip, Line } from '@rsc'; import { stockPriceData, workspaceTrendsData } from '@stories/data/data'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; -import React, { ReactElement } from 'react'; import { barData } from '../Bar/data'; import timeData from './timeData.json'; export default { - title: 'Prism/Axis', + title: 'RSC/Axis', component: Axis, argTypes: {}, parameters: { @@ -40,58 +40,58 @@ const data = [ ]; const AxisStory: ComponentStory<typeof Axis> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 600 }); + const chartProps = useChartProps({ data, width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis {...args} /> - </Prism> + </Chart> ); }; const TimeAxisStory: ComponentStory<typeof Axis> = (args): ReactElement => { return ( - <Prism data={timeData[args.granularity ?? DEFAULT_GRANULARITY]} width={600}> + <Chart data={timeData[args.granularity ?? DEFAULT_GRANULARITY]} width={600}> <Axis {...args} /> <Line /> - </Prism> + </Chart> ); }; const SubLabelStory: ComponentStory<typeof Axis> = (args): ReactElement => { return ( - <Prism data={barData} width={600}> + <Chart data={barData} width={600}> <Axis {...args} /> <Bar dimension="browser" metric="downloads" /> - </Prism> + </Chart> ); }; const LinearAxisStory: ComponentStory<typeof Axis> = (args): ReactElement => { - const prismProps = usePrismProps({ data: workspaceTrendsData, width: 600 }); + const chartProps = useChartProps({ data: workspaceTrendsData, width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis {...args} /> <Line color="series" dimension="point" scaleType="linear" /> - </Prism> + </Chart> ); }; const NonLinearAxisStory: ComponentStory<typeof Axis> = (args): ReactElement => { - const prismProps = usePrismProps({ data: workspaceTrendsData, width: 600 }); + const chartProps = useChartProps({ data: workspaceTrendsData, width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="bottom" ticks baseline labelFormat="time" /> <Axis {...args} /> <Line color="series" lineType="period" scaleType="time" /> - </Prism> + </Chart> ); }; const SparkLineStory: ComponentStory<typeof Axis> = (args): ReactElement => { - const prismProps = usePrismProps({ data: stockPriceData, width: 200, height: 100 }); + const chartProps = useChartProps({ data: stockPriceData, width: 200, height: 100 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis {...args} /> <Line dimension="timestamp" metric="price" scaleType="point" padding={0}> <ChartTooltip> @@ -104,7 +104,7 @@ const SparkLineStory: ComponentStory<typeof Axis> = (args): ReactElement => { )} </ChartTooltip> </Line> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Axis/Axis.test.tsx b/src/stories/components/Axis/Axis.test.tsx index 353baac3e..227fd2147 100644 --- a/src/stories/components/Axis/Axis.test.tsx +++ b/src/stories/components/Axis/Axis.test.tsx @@ -9,12 +9,11 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; import '@matchMediaMock'; -import { Axis } from '@prism'; -import { findPrism, getAllAxisLabels } from '@test-utils'; -import { render, screen, within } from '@testing-library/react'; -import React from 'react'; +import { Axis } from '@rsc'; +import { findChart, getAllAxisLabels, render, screen, within } from '@test-utils'; import { Basic, ControlledLabels, NonLinearAxis, SubLabels, TickMinStep, Time } from './Axis.story'; @@ -48,8 +47,8 @@ describe('Axis', () => { describe('Time axis', () => { test('Minute renders properly', async () => { render(<Time {...Time.args} granularity="minute" />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // make sure labels are visible expect(screen.getByText('Dec 2')).toBeInTheDocument(); @@ -57,8 +56,8 @@ describe('Axis', () => { test('Hour renders properly', async () => { render(<Time {...Time.args} granularity="hour" />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // make sure labels are visible expect(screen.getByText('Dec 1')).toBeInTheDocument(); @@ -66,8 +65,8 @@ describe('Axis', () => { test('Day renders properly', async () => { render(<Time {...Time.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // make sure labels are visible expect(screen.getByText('30')).toBeInTheDocument(); @@ -76,8 +75,8 @@ describe('Axis', () => { test('Week renders properly', async () => { render(<Time {...Time.args} granularity="week" />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // make sure labels are visible expect(screen.getByText('11')).toBeInTheDocument(); @@ -86,8 +85,8 @@ describe('Axis', () => { test('Month renders properly', async () => { render(<Time {...Time.args} granularity="month" />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // make sure labels are visible expect(screen.getByText('Jan')).toBeInTheDocument(); @@ -96,8 +95,8 @@ describe('Axis', () => { test('Quarter renders properly', async () => { render(<Time {...Time.args} granularity="quarter" />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // make sure labels are visible expect(screen.getAllByText('Q1')[0]).toBeInTheDocument(); @@ -108,8 +107,8 @@ describe('Axis', () => { describe('SubLabels', () => { test('Sub labels render properly', async () => { render(<SubLabels {...SubLabels.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // make sure labels are visible expect(screen.getByText('Chrome')).toBeInTheDocument(); @@ -120,8 +119,8 @@ describe('Axis', () => { describe('TickMinStep', () => { test('tickMinStep prop is respected in linear axis', async () => { render(<TickMinStep {...TickMinStep.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); expect(screen.getByText('5')).toBeInTheDocument(); expect(screen.queryByText('3')).not.toBeInTheDocument(); @@ -130,16 +129,16 @@ describe('Axis', () => { const argsWithUndefinedTickMinStep = { ...TickMinStep.args, tickMinStep: undefined }; render(<TickMinStep {...argsWithUndefinedTickMinStep} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); expect(screen.getByText('2')).toBeInTheDocument(); expect(screen.queryByText('5')).not.toBeInTheDocument(); }); test('tickMinStep is ignored and renders properly with non-linear scale', async () => { render(<NonLinearAxis {...NonLinearAxis.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); const axes = await screen.findAllByRole('graphics-symbol'); expect(axes[0]).toBeInTheDocument(); @@ -149,10 +148,10 @@ describe('Axis', () => { describe('ControlledLabels', () => { test('Axis labels match what is passed in as the labels prop', async () => { render(<ControlledLabels {...ControlledLabels.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisLabels = getAllAxisLabels(prism); + const axisLabels = getAllAxisLabels(chart); expect(axisLabels).toHaveLength(2); expect(screen.getByText('Jun 1')).toBeInTheDocument(); diff --git a/src/stories/components/Axis/AxisReferenceLine.story.tsx b/src/stories/components/Axis/AxisReferenceLine.story.tsx index 0854e1cb3..190d5364e 100644 --- a/src/stories/components/Axis/AxisReferenceLine.story.tsx +++ b/src/stories/components/Axis/AxisReferenceLine.story.tsx @@ -9,16 +9,16 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; import { ReferenceLine } from '@components/ReferenceLine'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Chart } from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; -import React, { ReactElement } from 'react'; export default { - title: 'Prism/Axis/ReferenceLine', + title: 'RSC/Axis/ReferenceLine', component: ReferenceLine, argTypes: {}, parameters: { @@ -36,13 +36,13 @@ const data = [ ]; const ReferenceLineStory: ComponentStory<typeof ReferenceLine> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 600 }); + const chartProps = useChartProps({ data, width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="bottom" baseline ticks> <ReferenceLine {...args} /> </Axis> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Axis/AxisReferenceLine.test.tsx b/src/stories/components/Axis/AxisReferenceLine.test.tsx index 76dfb74ac..cc00c393e 100644 --- a/src/stories/components/Axis/AxisReferenceLine.test.tsx +++ b/src/stories/components/Axis/AxisReferenceLine.test.tsx @@ -9,10 +9,10 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; import { ReferenceLine } from '@components/ReferenceLine'; -import { findMarksByGroupName, findPrism, render } from '@test-utils'; -import React from 'react'; +import { findChart, findMarksByGroupName, render } from '@test-utils'; import { Basic, Icon } from './AxisReferenceLine.story'; @@ -25,20 +25,20 @@ describe('AxisReferenceLine', () => { test('Reference line renders', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLine = await findMarksByGroupName(prism, 'axis0_xReferenceLineRule0', 'line'); + const axisReferenceLine = await findMarksByGroupName(chart, 'axis0_xReferenceLineRule0', 'line'); expect(axisReferenceLine).toBeInTheDocument(); }); test('Icon renders', async () => { render(<Icon {...Icon.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineIcon = await findMarksByGroupName(prism, 'axis0_xReferenceLineSymbol0'); + const axisReferenceLineIcon = await findMarksByGroupName(chart, 'axis0_xReferenceLineSymbol0'); expect(axisReferenceLineIcon).toBeInTheDocument(); }); }); diff --git a/src/stories/components/AxisAnnotation/AxisAnnotation.story.tsx b/src/stories/components/AxisAnnotation/AxisAnnotation.story.tsx index f0270e330..723d9903b 100644 --- a/src/stories/components/AxisAnnotation/AxisAnnotation.story.tsx +++ b/src/stories/components/AxisAnnotation/AxisAnnotation.story.tsx @@ -20,16 +20,16 @@ */ import React, { ReactElement } from 'react'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, AxisAnnotation, ChartPopover, Legend, Line, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, AxisAnnotation, Chart, ChartPopover, Legend, Line } from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; -import { PrismProps } from 'types'; +import { ChartProps } from 'types'; import { Content } from '@adobe/react-spectrum'; export default { - title: 'Prism/AxisAnnotation', + title: 'RSC/AxisAnnotation', component: AxisAnnotation, argTypes: {}, parameters: { @@ -64,39 +64,39 @@ const popoverContent = (datum) => ( </Content> ); -const defaultPrismLineProps: PrismProps = { data: annotationAxisData, minWidth: 400, maxWidth: 800, height: 400 }; +const defaultChartLineProps: ChartProps = { data: annotationAxisData, minWidth: 400, maxWidth: 800, height: 400 }; const BasicAxisAnnotationStory: ComponentStory<typeof AxisAnnotation> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismLineProps); + const chartProps = useChartProps(defaultChartLineProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" granularity="day" baseline ticks> <AxisAnnotation {...args} /> </Axis> <Line color="series" dimension="datetime" metric="users" scaleType="time" /> - </Prism> + </Chart> ); }; const LegendAxisAnnotationStory: ComponentStory<typeof AxisAnnotation> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismLineProps); + const chartProps = useChartProps(defaultChartLineProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" granularity="day" baseline ticks> <AxisAnnotation {...args} /> </Axis> <Line color="series" dimension="datetime" metric="users" scaleType="time" /> <Legend highlight /> - </Prism> + </Chart> ); }; const PopoverAxisAnnotationStory: ComponentStory<typeof AxisAnnotation> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismLineProps); + const chartProps = useChartProps(defaultChartLineProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" granularity="day" baseline ticks> <AxisAnnotation {...args}> @@ -106,7 +106,7 @@ const PopoverAxisAnnotationStory: ComponentStory<typeof AxisAnnotation> = (args) <Line color="series" dimension="datetime" metric="users" scaleType="time"> <ChartPopover width={250}>{(datum) => <Content>Series: {datum.series}</Content>}</ChartPopover> </Line> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/AxisAnnotation/AxisAnnotation.test.tsx b/src/stories/components/AxisAnnotation/AxisAnnotation.test.tsx index 4cd27c3d6..302d93b41 100644 --- a/src/stories/components/AxisAnnotation/AxisAnnotation.test.tsx +++ b/src/stories/components/AxisAnnotation/AxisAnnotation.test.tsx @@ -9,10 +9,12 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; + import { AxisAnnotation } from '@components/AxisAnnotation'; -import { clickNthElement, findAllMarksByGroupName, findPrism, render, screen } from '@test-utils'; +import { clickNthElement, findAllMarksByGroupName, findChart, render, screen } from '@test-utils'; import { spectrumColors } from '@themes'; -import React from 'react'; + import { Basic, Color, ColorOptions, Format, Popover } from './AxisAnnotation.story'; const colors = spectrumColors.light; @@ -30,20 +32,20 @@ describe('AxisAnnotation', () => { test('Basic renders correctly', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const annotations = await findAllMarksByGroupName(prism, 'axis1Annotation0_icon'); + const annotations = await findAllMarksByGroupName(chart, 'axis1Annotation0_icon'); expect(annotations).toHaveLength(3); }); test('Annotations render in the correct color', async () => { render(<Color {...Color.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const annotations = await findAllMarksByGroupName(prism, 'axis1Annotation0_icon'); + const annotations = await findAllMarksByGroupName(chart, 'axis1Annotation0_icon'); expect(annotations).toHaveLength(3); expect(annotations[0]).toHaveAttribute('fill', colors['celery-600']); @@ -52,10 +54,10 @@ describe('AxisAnnotation', () => { test('Annotations render in the correct color when using color options', async () => { render(<ColorOptions {...ColorOptions.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const annotations = await findAllMarksByGroupName(prism, 'axis1Annotation0_icon'); + const annotations = await findAllMarksByGroupName(chart, 'axis1Annotation0_icon'); expect(annotations).toHaveLength(3); expect(annotations[0]).toHaveAttribute('fill', colors['magenta-600']); @@ -66,10 +68,10 @@ describe('AxisAnnotation', () => { test('Summary icon renders correctly', async () => { render(<Format {...Format.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const annotations = await findAllMarksByGroupName(prism, 'axis1Annotation0_icon'); + const annotations = await findAllMarksByGroupName(chart, 'axis1Annotation0_icon'); expect(annotations).toHaveLength(1); expect(annotations[0]).toHaveAttribute('fill', colors['gray-600']); @@ -78,17 +80,17 @@ describe('AxisAnnotation', () => { test('Popover renders correctly', async () => { render(<Popover {...Popover.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const annotations = await findAllMarksByGroupName(prism, 'axis1Annotation0_icon'); + const annotations = await findAllMarksByGroupName(chart, 'axis1Annotation0_icon'); expect(annotations).toHaveLength(3); - let popover = screen.queryByTestId('prism-popover'); + let popover = screen.queryByTestId('rsc-popover'); expect(popover).not.toBeInTheDocument(); clickNthElement(annotations, 0); - popover = await screen.findByTestId('prism-popover'); + popover = await screen.findByTestId('rsc-popover'); expect(popover).toBeInTheDocument(); }); }); diff --git a/src/stories/components/Bar/Bar.story.tsx b/src/stories/components/Bar/Bar.story.tsx index 60a790b32..c075bb8bb 100644 --- a/src/stories/components/Bar/Bar.story.tsx +++ b/src/stories/components/Bar/Bar.story.tsx @@ -12,15 +12,15 @@ import React, { ReactElement, createElement } from 'react'; import { Annotation } from '@components/Annotation'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Bar, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Bar, Chart } from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; import { barData } from './data'; export default { - title: 'Prism/Bar', + title: 'RSC/Bar', component: Bar, argTypes: {}, parameters: { @@ -33,13 +33,13 @@ export default { }; const BarStory: ComponentStory<typeof Bar> = (args): ReactElement => { - const prismProps = usePrismProps({ data: barData, width: 600, height: 600 }); + const chartProps = useChartProps({ data: barData, width: 600, height: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position={args.orientation === 'horizontal' ? 'left' : 'bottom'} baseline title="Browser" /> <Axis position={args.orientation === 'horizontal' ? 'bottom' : 'left'} grid title="Downloads" /> <Bar {...args} /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Bar/Bar.test.tsx b/src/stories/components/Bar/Bar.test.tsx index bf5e9ea11..711124c71 100644 --- a/src/stories/components/Bar/Bar.test.tsx +++ b/src/stories/components/Bar/Bar.test.tsx @@ -12,9 +12,8 @@ import React from 'react'; import '@matchMediaMock'; -import { Bar } from '@prism'; -import { findAllMarksByGroupName, findPrism } from '@test-utils'; -import { render } from '@testing-library/react'; +import { Bar } from '@rsc'; +import { findAllMarksByGroupName, findChart, render } from '@test-utils'; import { Basic, Opacity, PaddingRatio, WithAnnotation } from './Bar.story'; import { Color, DodgedStacked } from './DodgedBar.story'; @@ -28,75 +27,75 @@ describe('Bar', () => { test('Basic renders properly', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); }); test('Opacity renders properly', async () => { render(<Opacity {...Opacity.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars[0].getAttribute('fill-opacity')).toEqual('0.75'); }); test('Padding Ratio renders properly', async () => { render(<PaddingRatio {...PaddingRatio.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); }); test('With Annotation renders properly', async () => { render(<WithAnnotation {...WithAnnotation.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); // get annotations - const labels = await findAllMarksByGroupName(prism, 'bar0_annotationText', 'text'); + const labels = await findAllMarksByGroupName(chart, 'bar0_annotationText', 'text'); expect(labels.length).toEqual(5); }); test('Dodged Basic renders properly', async () => { render(<Color {...Color.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(9); }); test('Dodged Stacked renders properly', async () => { render(<DodgedStacked {...DodgedStacked.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(18); }); test('Stacked Basic renders properly', async () => { render(<StackedBasic {...StackedBasic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(9); }); }); diff --git a/src/stories/components/Bar/DodgedBar.story.tsx b/src/stories/components/Bar/DodgedBar.story.tsx index 9fbac66b6..82073bd54 100644 --- a/src/stories/components/Bar/DodgedBar.story.tsx +++ b/src/stories/components/Bar/DodgedBar.story.tsx @@ -12,8 +12,8 @@ import React, { ReactElement, createElement } from 'react'; import { Annotation } from '@components/Annotation'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Bar, ChartPopover, ChartTooltip, Legend, Prism, categorical6 } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Bar, Chart, ChartPopover, ChartTooltip, Legend, categorical6 } from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; @@ -22,7 +22,7 @@ import { Content } from '@adobe/react-spectrum'; import { barSeriesData, barSubSeriesData } from './data'; export default { - title: 'Prism/Bar/Dodged Bar', + title: 'RSC/Bar/Dodged Bar', component: Bar, argTypes: {}, parameters: { @@ -44,14 +44,14 @@ const DodgedBarStory: ComponentStory<typeof Bar> = (args): ReactElement => { ] : categorical6; const data = Array.isArray(color) ? barSubSeriesData : barSeriesData; - const prismProps = usePrismProps({ data, width: 800, height: 600, colors }); + const chartProps = useChartProps({ data, width: 800, height: 600, colors }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position={args.orientation === 'horizontal' ? 'left' : 'bottom'} baseline title="Browser" /> <Axis position={args.orientation === 'horizontal' ? 'bottom' : 'left'} grid title="Downloads" /> <Bar {...args} /> <Legend title="Operating system" highlight /> - </Prism> + </Chart> ); }; @@ -64,9 +64,9 @@ const dialogContent = (datum) => ( ); const DodgedBarPopoverStory: ComponentStory<typeof Bar> = (args): ReactElement => { - const prismProps = usePrismProps({ data: barSeriesData, width: 800, height: 600 }); + const chartProps = useChartProps({ data: barSeriesData, width: 800, height: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position={args.orientation === 'horizontal' ? 'left' : 'bottom'} baseline title="Browser" /> <Axis position={args.orientation === 'horizontal' ? 'bottom' : 'left'} grid title="Downloads" /> <Bar {...args}> @@ -74,19 +74,19 @@ const DodgedBarPopoverStory: ComponentStory<typeof Bar> = (args): ReactElement = <ChartPopover width={200}>{dialogContent}</ChartPopover> </Bar> <Legend title="Operating system" highlight /> - </Prism> + </Chart> ); }; const DodgedBarLineTypeStory: ComponentStory<typeof Bar> = (args): ReactElement => { - const prismProps = usePrismProps({ data: barSeriesData, width: 800, height: 600 }); + const chartProps = useChartProps({ data: barSeriesData, width: 800, height: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position={args.orientation === 'horizontal' ? 'left' : 'bottom'} baseline title="Browser" /> <Axis position={args.orientation === 'horizontal' ? 'bottom' : 'left'} grid title="Downloads" /> <Bar {...args} /> <Legend title="Operating system" opacity={{ value: 0.2 }} /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Bar/ReferenceLineBar.story.tsx b/src/stories/components/Bar/ReferenceLineBar.story.tsx index 52f072f39..8061725ac 100644 --- a/src/stories/components/Bar/ReferenceLineBar.story.tsx +++ b/src/stories/components/Bar/ReferenceLineBar.story.tsx @@ -9,17 +9,17 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; import { ReferenceLine } from '@components/ReferenceLine'; -import { Bar } from 'components/Bar'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Chart } from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; -import React, { ReactElement } from 'react'; +import { Bar } from 'components/Bar'; export default { - title: 'Prism/Bar/ReferenceLine', + title: 'RSC/Bar/ReferenceLine', component: ReferenceLine, argTypes: {}, parameters: { @@ -40,27 +40,27 @@ const data = [ ]; const ReferenceLineStory: ComponentStory<typeof ReferenceLine> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 600 }); + const chartProps = useChartProps({ data, width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="bottom" baseline ticks> <ReferenceLine {...args} /> </Axis> <Bar dimension="y" metric="x" /> - </Prism> + </Chart> ); }; const ReferenceLineHorizontalStory: ComponentStory<typeof ReferenceLine> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 600 }); + const chartProps = useChartProps({ data, width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" baseline ticks> <ReferenceLine {...args} /> </Axis> <Axis position="bottom" baseline ticks></Axis> <Bar dimension="y" metric="x" /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Bar/ReferenceLineBar.test.tsx b/src/stories/components/Bar/ReferenceLineBar.test.tsx index f3fc69b91..c319887cf 100644 --- a/src/stories/components/Bar/ReferenceLineBar.test.tsx +++ b/src/stories/components/Bar/ReferenceLineBar.test.tsx @@ -9,10 +9,10 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -import { findAllMarksByGroupName, findMarksByGroupName, findPrism, render } from '@test-utils'; import React from 'react'; +import { findAllMarksByGroupName, findChart, findMarksByGroupName, render } from '@test-utils'; + import { Basic, HorizontalIcon, @@ -28,14 +28,14 @@ describe('AxisReferenceLine', () => { test('Reference line renders', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLine = await findMarksByGroupName(prism, 'axis0_xReferenceLineRule0', 'line'); + const axisReferenceLine = await findMarksByGroupName(chart, 'axis0_xReferenceLineRule0', 'line'); expect(axisReferenceLine).toBeInTheDocument(); expect(axisReferenceLine).toHaveAttribute('transform', 'translate(298,0)'); }); @@ -43,14 +43,14 @@ describe('AxisReferenceLine', () => { test('Icon renders', async () => { render(<Icon {...Icon.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLineIcon = await findMarksByGroupName(prism, 'axis0_xReferenceLineSymbol0'); + const axisReferenceLineIcon = await findMarksByGroupName(chart, 'axis0_xReferenceLineSymbol0'); expect(axisReferenceLineIcon).toBeInTheDocument(); expect(axisReferenceLineIcon).toHaveAttribute('transform', 'translate(298,290)'); }); @@ -58,35 +58,35 @@ describe('AxisReferenceLine', () => { test('Label renders', async () => { render(<Label {...Label.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLineLabel = await findMarksByGroupName(prism, 'axis0_xReferenceLineLabel0', 'text'); + const axisReferenceLineLabel = await findMarksByGroupName(chart, 'axis0_xReferenceLineLabel0', 'text'); expect(axisReferenceLineLabel).toHaveAttribute('transform', 'translate(298,294)'); }); test('Supreme renders bars', async () => { render(<Supreme {...Supreme.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); }); test('Supreme renders icon', async () => { render(<Supreme {...Supreme.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineIcon = await findMarksByGroupName(prism, 'axis0_xReferenceLineSymbol0'); + const axisReferenceLineIcon = await findMarksByGroupName(chart, 'axis0_xReferenceLineSymbol0'); expect(axisReferenceLineIcon).toBeInTheDocument(); expect(axisReferenceLineIcon).toHaveAttribute('transform', 'translate(298,271)'); }); @@ -94,10 +94,10 @@ describe('AxisReferenceLine', () => { test('Supreme renders label', async () => { render(<Supreme {...Supreme.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineLabel = await findMarksByGroupName(prism, 'axis0_xReferenceLineLabel0', 'text'); + const axisReferenceLineLabel = await findMarksByGroupName(chart, 'axis0_xReferenceLineLabel0', 'text'); expect(axisReferenceLineLabel).toHaveAttribute('transform', 'translate(298,295)'); }); }); @@ -106,14 +106,14 @@ describe('AxisReferenceLine', () => { test('Reference line renders', async () => { render(<Basic {...{ ...Basic.args, position: 'before' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLine = await findMarksByGroupName(prism, 'axis0_xReferenceLineRule0', 'line'); + const axisReferenceLine = await findMarksByGroupName(chart, 'axis0_xReferenceLineRule0', 'line'); expect(axisReferenceLine).toBeInTheDocument(); expect(axisReferenceLine).toHaveAttribute('transform', 'translate(238.4,0)'); }); @@ -121,14 +121,14 @@ describe('AxisReferenceLine', () => { test('Icon renders', async () => { render(<Icon {...{ ...Icon.args, position: 'before' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLineIcon = await findMarksByGroupName(prism, 'axis0_xReferenceLineSymbol0'); + const axisReferenceLineIcon = await findMarksByGroupName(chart, 'axis0_xReferenceLineSymbol0'); expect(axisReferenceLineIcon).toBeInTheDocument(); expect(axisReferenceLineIcon).toHaveAttribute('transform', 'translate(238.4,290)'); }); @@ -136,35 +136,35 @@ describe('AxisReferenceLine', () => { test('Label renders', async () => { render(<Label {...{ ...Label.args, position: 'before' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLineLabel = await findMarksByGroupName(prism, 'axis0_xReferenceLineLabel0', 'text'); + const axisReferenceLineLabel = await findMarksByGroupName(chart, 'axis0_xReferenceLineLabel0', 'text'); expect(axisReferenceLineLabel).toHaveAttribute('transform', 'translate(238.4,294)'); }); test('Supreme renders bars', async () => { render(<Supreme {...{ ...Supreme.args, position: 'before' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); }); test('Supreme renders icon', async () => { render(<Supreme {...{ ...Supreme.args, position: 'before' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineIcon = await findMarksByGroupName(prism, 'axis0_xReferenceLineSymbol0'); + const axisReferenceLineIcon = await findMarksByGroupName(chart, 'axis0_xReferenceLineSymbol0'); expect(axisReferenceLineIcon).toBeInTheDocument(); expect(axisReferenceLineIcon).toHaveAttribute('transform', 'translate(238.4,271)'); }); @@ -172,10 +172,10 @@ describe('AxisReferenceLine', () => { test('Supreme renders label', async () => { render(<Supreme {...{ ...Supreme.args, position: 'before' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineLabel = await findMarksByGroupName(prism, 'axis0_xReferenceLineLabel0', 'text'); + const axisReferenceLineLabel = await findMarksByGroupName(chart, 'axis0_xReferenceLineLabel0', 'text'); expect(axisReferenceLineLabel).toHaveAttribute('transform', 'translate(238.4,295)'); }); }); @@ -184,14 +184,14 @@ describe('AxisReferenceLine', () => { test('Reference line renders', async () => { render(<Basic {...{ ...Basic.args, position: 'after' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLine = await findMarksByGroupName(prism, 'axis0_xReferenceLineRule0', 'line'); + const axisReferenceLine = await findMarksByGroupName(chart, 'axis0_xReferenceLineRule0', 'line'); expect(axisReferenceLine).toBeInTheDocument(); expect(axisReferenceLine).toHaveAttribute('transform', 'translate(357.59999999999997,0)'); }); @@ -199,14 +199,14 @@ describe('AxisReferenceLine', () => { test('Icon renders', async () => { render(<Icon {...{ ...Icon.args, position: 'after' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLineIcon = await findMarksByGroupName(prism, 'axis0_xReferenceLineSymbol0'); + const axisReferenceLineIcon = await findMarksByGroupName(chart, 'axis0_xReferenceLineSymbol0'); expect(axisReferenceLineIcon).toBeInTheDocument(); expect(axisReferenceLineIcon).toHaveAttribute('transform', 'translate(357.59999999999997,290)'); }); @@ -214,35 +214,35 @@ describe('AxisReferenceLine', () => { test('Label renders', async () => { render(<Label {...{ ...Label.args, position: 'after' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLineLabel = await findMarksByGroupName(prism, 'axis0_xReferenceLineLabel0', 'text'); + const axisReferenceLineLabel = await findMarksByGroupName(chart, 'axis0_xReferenceLineLabel0', 'text'); expect(axisReferenceLineLabel).toHaveAttribute('transform', 'translate(357.59999999999997,294)'); }); test('Supreme renders bars', async () => { render(<Supreme {...{ ...Supreme.args, position: 'after' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); }); test('Supreme renders icon', async () => { render(<Supreme {...{ ...Supreme.args, position: 'after' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineIcon = await findMarksByGroupName(prism, 'axis0_xReferenceLineSymbol0'); + const axisReferenceLineIcon = await findMarksByGroupName(chart, 'axis0_xReferenceLineSymbol0'); expect(axisReferenceLineIcon).toBeInTheDocument(); expect(axisReferenceLineIcon).toHaveAttribute('transform', 'translate(357.59999999999997,271)'); }); @@ -250,10 +250,10 @@ describe('AxisReferenceLine', () => { test('Supreme renders label', async () => { render(<Supreme {...{ ...Supreme.args, position: 'after' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineLabel = await findMarksByGroupName(prism, 'axis0_xReferenceLineLabel0', 'text'); + const axisReferenceLineLabel = await findMarksByGroupName(chart, 'axis0_xReferenceLineLabel0', 'text'); expect(axisReferenceLineLabel).toHaveAttribute('transform', 'translate(357.59999999999997,295)'); }); }); @@ -262,28 +262,28 @@ describe('AxisReferenceLine', () => { test('Label', async () => { render(<HorizontalLabel {...HorizontalLabel.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLineLabel = await findMarksByGroupName(prism, 'axis0_yReferenceLineLabel0', 'text'); + const axisReferenceLineLabel = await findMarksByGroupName(chart, 'axis0_yReferenceLineLabel0', 'text'); expect(axisReferenceLineLabel).toHaveAttribute('transform', 'translate(-26,119.60000000000001)'); }); test('Icon', async () => { render(<HorizontalIcon {...HorizontalIcon.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); - const axisReferenceLineIcon = await findMarksByGroupName(prism, 'axis0_yReferenceLineSymbol0'); + const axisReferenceLineIcon = await findMarksByGroupName(chart, 'axis0_yReferenceLineSymbol0'); expect(axisReferenceLineIcon).toBeInTheDocument(); expect(axisReferenceLineIcon).toHaveAttribute('transform', 'translate(-24,107.60000000000001)'); }); @@ -291,21 +291,21 @@ describe('AxisReferenceLine', () => { test('Supreme renders bars', async () => { render(<HorizontalSupreme {...HorizontalSupreme.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(5); }); test('Supreme renders icon', async () => { render(<HorizontalSupreme {...HorizontalSupreme.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineIcon = await findMarksByGroupName(prism, 'axis0_yReferenceLineSymbol0'); + const axisReferenceLineIcon = await findMarksByGroupName(chart, 'axis0_yReferenceLineSymbol0'); expect(axisReferenceLineIcon).toBeInTheDocument(); expect(axisReferenceLineIcon).toHaveAttribute('transform', 'translate(-24,107.60000000000001)'); }); @@ -313,10 +313,10 @@ describe('AxisReferenceLine', () => { test('Supreme renders label', async () => { render(<HorizontalSupreme {...HorizontalSupreme.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineLabel = await findMarksByGroupName(prism, 'axis0_yReferenceLineLabel0', 'text'); + const axisReferenceLineLabel = await findMarksByGroupName(chart, 'axis0_yReferenceLineLabel0', 'text'); expect(axisReferenceLineLabel).toHaveAttribute('transform', 'translate(-48,131.60000000000002)'); }); }); @@ -325,20 +325,20 @@ describe('AxisReferenceLine', () => { test('Default', async () => { render(<Label {...Label.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineLabel = await findMarksByGroupName(prism, 'axis0_xReferenceLineLabel0', 'text'); + const axisReferenceLineLabel = await findMarksByGroupName(chart, 'axis0_xReferenceLineLabel0', 'text'); expect(axisReferenceLineLabel).toHaveAttribute('font-weight', 'normal'); }); test('Bold', async () => { render(<Label {...{ ...Label.args, labelFontWeight: 'bold' }} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const axisReferenceLineLabel = await findMarksByGroupName(prism, 'axis0_xReferenceLineLabel0', 'text'); + const axisReferenceLineLabel = await findMarksByGroupName(chart, 'axis0_xReferenceLineLabel0', 'text'); expect(axisReferenceLineLabel).toHaveAttribute('font-weight', 'bold'); }); }); diff --git a/src/stories/components/Bar/StackedBar.story.tsx b/src/stories/components/Bar/StackedBar.story.tsx index d33262522..21f706ed7 100644 --- a/src/stories/components/Bar/StackedBar.story.tsx +++ b/src/stories/components/Bar/StackedBar.story.tsx @@ -12,8 +12,8 @@ import React, { ReactElement, createElement } from 'react'; import { Annotation } from '@components/Annotation'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Bar, Legend, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Bar, Chart, Legend } from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; import { SpectrumColor } from 'types'; @@ -21,7 +21,7 @@ import { SpectrumColor } from 'types'; import { barSeriesData, negativeBarSeriesData } from './data'; export default { - title: 'Prism/Bar/Stacked Bar', + title: 'RSC/Bar/Stacked Bar', component: Bar, argTypes: {}, parameters: { @@ -41,26 +41,26 @@ const colors: SpectrumColor[] = [ ]; const BarStory: ComponentStory<typeof Bar> = (args): ReactElement => { - const prismProps = usePrismProps({ data: barSeriesData, colors, width: 800, height: 600 }); + const chartProps = useChartProps({ data: barSeriesData, colors, width: 800, height: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position={args.orientation === 'horizontal' ? 'left' : 'bottom'} baseline title="Browser" /> <Axis position={args.orientation === 'horizontal' ? 'bottom' : 'left'} grid title="Downloads" /> <Bar {...args} /> <Legend title="Operating system" /> - </Prism> + </Chart> ); }; const NegativeBarStory: ComponentStory<typeof Bar> = (args): ReactElement => { - const prismProps = usePrismProps({ data: negativeBarSeriesData, width: 800, height: 600 }); + const chartProps = useChartProps({ data: negativeBarSeriesData, width: 800, height: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position={args.orientation === 'horizontal' ? 'left' : 'bottom'} baseline title="Browser" /> <Axis position={args.orientation === 'horizontal' ? 'bottom' : 'left'} grid title="Downloads" /> <Bar {...args} /> <Legend title="Operating system" /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Bar/TrellisBar.story.tsx b/src/stories/components/Bar/TrellisBar.story.tsx index c0e6752f3..29defc501 100644 --- a/src/stories/components/Bar/TrellisBar.story.tsx +++ b/src/stories/components/Bar/TrellisBar.story.tsx @@ -12,8 +12,8 @@ import React, { ReactElement } from 'react'; import { MARK_ID } from '@constants'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Bar, ChartPopover, ChartTooltip, Legend, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Bar, Chart, ChartPopover, ChartTooltip, Legend } from '@rsc'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; import { BarProps, Datum, SpectrumColor } from 'types'; @@ -23,7 +23,7 @@ import { Content, Text, View } from '@adobe/react-spectrum'; import { generateMockDataForTrellis } from './data'; export default { - title: 'Prism/Bar/Trellis', + title: 'RSC/Bar/Trellis', component: Bar, argTypes: {}, parameters: { @@ -46,7 +46,7 @@ const colors: SpectrumColor[] = [ ]; const BarStory: ComponentStory<typeof Bar> = (args: BarProps): ReactElement => { - const prismProps = usePrismProps({ + const chartProps = useChartProps({ data: generateMockDataForTrellis({ property1: ['All users', 'Roku', 'Chromecast', 'Amazon Fire', 'Apple TV'], property2: ['A. Sign up', 'B. Watch a video', 'C. Add to MyList'], @@ -71,7 +71,7 @@ const BarStory: ComponentStory<typeof Bar> = (args: BarProps): ReactElement => { }; return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position={args.orientation === 'horizontal' ? 'bottom' : 'left'} title="Users, Count" grid /> <Axis position={args.orientation === 'horizontal' ? 'left' : 'bottom'} title="Platform" baseline /> <Bar {...args}> @@ -79,7 +79,7 @@ const BarStory: ComponentStory<typeof Bar> = (args: BarProps): ReactElement => { <ChartPopover>{dialog}</ChartPopover> </Bar> <Legend /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Bar/TrellisBar.test.tsx b/src/stories/components/Bar/TrellisBar.test.tsx index a145b949d..fb25755e0 100644 --- a/src/stories/components/Bar/TrellisBar.test.tsx +++ b/src/stories/components/Bar/TrellisBar.test.tsx @@ -12,8 +12,15 @@ import React from 'react'; import '@matchMediaMock'; -import { clickNthElement, findAllMarksByGroupName, findPrism } from '@test-utils'; -import { findAllByText, getByText, render, screen } from '@testing-library/react'; +import { + clickNthElement, + findAllByText, + findAllMarksByGroupName, + findChart, + getByText, + render, + screen, +} from '@test-utils'; import { Dodged, @@ -26,16 +33,16 @@ import { describe('TrellisBar', () => { test('Dodged renders properly', async () => { render(<Dodged {...Dodged.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(90); // click on bar and check where it rendered await clickNthElement(bars, 45); - const popoverAnchor = await screen.findByTestId('prism-popover-anchor'); + const popoverAnchor = await screen.findByTestId('rsc-popover-anchor'); expect(popoverAnchor).toHaveStyle('position: absolute'); expect(popoverAnchor).toHaveStyle('width: 85.60000000000002px'); expect(popoverAnchor).toHaveStyle('height: 8.421428571428521px'); @@ -45,54 +52,54 @@ describe('TrellisBar', () => { test('HorizontalBarHorizontalTrellis renders correctly', async () => { render(<HorizontalBarHorizontalTrellis {...HorizontalBarHorizontalTrellis.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(90); }); test('HorizontalBarVerticalTrellis renders correctly', async () => { render(<HorizontalBarVerticalTrellis {...HorizontalBarVerticalTrellis.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(90); }); test('VerticalBarHorizontalTrellis renders correctly', async () => { render(<VerticalBarHorizontalTrellis {...VerticalBarHorizontalTrellis.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(90); }); test('VerticalBarVerticalTrellis renders correctly', async () => { render(<VerticalBarVerticalTrellis {...VerticalBarVerticalTrellis.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(90); }); describe('axis titles', () => { test('should only display the axis title once, the others should have opacity = 0', async () => { render(<Dodged {...Dodged.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - expect(getByText(prism, 'Platform')).toBeInTheDocument(); + expect(getByText(chart, 'Platform')).toBeInTheDocument(); // get y-axis titles, there should be 3 but only one should be visible - const yTitles = await findAllByText(prism, 'Users, Count'); + const yTitles = await findAllByText(chart, 'Users, Count'); expect(yTitles).toHaveLength(3); expect(yTitles[0]).toHaveAttribute('opacity', '1'); expect(yTitles[1]).toHaveAttribute('opacity', '0'); diff --git a/src/stories/components/ChartPopover/ChartPopover.story.tsx b/src/stories/components/ChartPopover/ChartPopover.story.tsx index 4f04cba51..f32b7e225 100644 --- a/src/stories/components/ChartPopover/ChartPopover.story.tsx +++ b/src/stories/components/ChartPopover/ChartPopover.story.tsx @@ -9,17 +9,18 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; -import { Content } from '@adobe/react-spectrum'; -import usePrismProps from '@hooks/usePrismProps'; -import { Area, Axis, Bar, ChartPopover, ChartTooltip, Legend, Line, Prism, PrismProps } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Area, Axis, Bar, Chart, ChartPopover, ChartProps, ChartTooltip, Legend, Line } from '@rsc'; import { browserData as data } from '@stories/data/data'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; -import React, { ReactElement } from 'react'; + +import { Content } from '@adobe/react-spectrum'; export default { - title: 'Prism/ChartPopover', + title: 'RSC/ChartPopover', component: ChartPopover, argTypes: { children: { @@ -46,48 +47,48 @@ const dialogContent = (datum) => ( </Content> ); -const defaultPrismProps: PrismProps = { data, renderer: 'svg', width: 600 }; +const defaultChartProps: ChartProps = { data, renderer: 'svg', width: 600 }; const ChartPopoverCanvasStory: ComponentStory<typeof ChartPopover> = (args): ReactElement => { - const prismProps = usePrismProps({ data, renderer: 'canvas', width: 600 }); + const chartProps = useChartProps({ data, renderer: 'canvas', width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Bar color="series"> <ChartTooltip>{dialogContent}</ChartTooltip> <ChartPopover {...args} /> </Bar> - </Prism> + </Chart> ); }; const ChartPopoverSvgStory: ComponentStory<typeof ChartPopover> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Bar color="series"> <ChartTooltip>{dialogContent}</ChartTooltip> <ChartPopover {...args} /> </Bar> - </Prism> + </Chart> ); }; const ChartPopoverDodgedBarStory: ComponentStory<typeof ChartPopover> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Bar color="series" type="dodged"> <ChartTooltip>{dialogContent}</ChartTooltip> <ChartPopover {...args} /> </Bar> - </Prism> + </Chart> ); }; const LineStory: ComponentStory<typeof ChartPopover> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="bottom" baseline /> <Axis position="left" grid /> <Line scaleType="point" dimension="category" color="series"> @@ -95,14 +96,14 @@ const LineStory: ComponentStory<typeof ChartPopover> = (args): ReactElement => { <ChartPopover {...args} /> </Line> <Legend /> - </Prism> + </Chart> ); }; const AreaStory: ComponentStory<typeof ChartPopover> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="bottom" baseline /> <Axis position="left" grid /> <Area scaleType="point" dimension="category"> @@ -110,7 +111,7 @@ const AreaStory: ComponentStory<typeof ChartPopover> = (args): ReactElement => { <ChartPopover {...args} /> </Area> <Legend /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/ChartPopover/ChartPopover.test.tsx b/src/stories/components/ChartPopover/ChartPopover.test.tsx index fbd20f965..7af7b5251 100644 --- a/src/stories/components/ChartPopover/ChartPopover.test.tsx +++ b/src/stories/components/ChartPopover/ChartPopover.test.tsx @@ -9,15 +9,16 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; import { HIGHLIGHT_CONTRAST_RATIO } from '@constants'; import '@matchMediaMock'; -import { ChartPopover } from '@prism'; +import { ChartPopover } from '@rsc'; import { clickNthElement, findAllMarksByGroupName, + findChart, findMarksByGroupName, - findPrism, getAllMarksByGroupName, render, screen, @@ -25,7 +26,6 @@ import { within, } from '@test-utils'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { Canvas, DodgedBarChart, LineChart, StackedBarChart, Svg } from './ChartPopover.story'; @@ -37,26 +37,26 @@ describe('ChartPopover', () => { test('Renders properly on canvas', async () => { render(<Canvas {...Canvas.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); }); test('Renders properly in svg', async () => { render(<Svg {...Svg.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); }); test('Popover opens on mark click and closes when clicking outside', async () => { render(<StackedBarChart {...StackedBarChart.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + const bars = getAllMarksByGroupName(chart, 'bar0'); // clicking the bar should open the popover await clickNthElement(bars, 0); - const popover = await screen.findByTestId('prism-popover'); + const popover = await screen.findByTestId('rsc-popover'); await waitFor(() => expect(popover).toBeInTheDocument()); // waitFor to give the popover time to make sure it doesn't close // shouldn't close the popover @@ -64,18 +64,18 @@ describe('ChartPopover', () => { expect(popover).toBeInTheDocument(); // should close the popover - await userEvent.click(prism); + await userEvent.click(chart); await waitFor(() => expect(popover).not.toBeInTheDocument()); }); test('Esc closes the popover', async () => { render(<StackedBarChart {...StackedBarChart.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + const bars = getAllMarksByGroupName(chart, 'bar0'); await clickNthElement(bars, 0); - const popover = await screen.findByTestId('prism-popover'); + const popover = await screen.findByTestId('rsc-popover'); await userEvent.keyboard('Hello'); @@ -86,15 +86,15 @@ describe('ChartPopover', () => { test('Content appears in popover', async () => { render(<StackedBarChart {...StackedBarChart.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); - let bars = getAllMarksByGroupName(prism, 'bar0'); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + let bars = getAllMarksByGroupName(chart, 'bar0'); await clickNthElement(bars, 0); - const popover = await screen.findByTestId('prism-popover'); + const popover = await screen.findByTestId('rsc-popover'); expect(within(popover).getByText('Users: 5')).toBeInTheDocument(); - bars = getAllMarksByGroupName(prism, 'bar0'); + bars = getAllMarksByGroupName(chart, 'bar0'); // validate the highlight visuals are present expect(bars[1]).toHaveAttribute('fill-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); expect(bars[1]).toHaveAttribute('stroke-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); @@ -107,13 +107,13 @@ describe('ChartPopover', () => { test('Line popover opens and closes corectly when clicking on the chart', async () => { render(<LineChart {...LineChart.args} />); // validate that the line drew - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const points = await findAllMarksByGroupName(prism, 'line0_voronoi'); + const points = await findAllMarksByGroupName(chart, 'line0_voronoi'); // click point and verify popover appears correctly await clickNthElement(points, 2); - const popover = await screen.findByTestId('prism-popover'); + const popover = await screen.findByTestId('rsc-popover'); expect(popover).toBeInTheDocument(); // check the content of the popover expect(within(popover).getByText('Operating system: Other')).toBeInTheDocument(); @@ -121,13 +121,13 @@ describe('ChartPopover', () => { expect(within(popover).getByText('Users: 2')).toBeInTheDocument(); // validate the highlight visuals are present - const highlightRule = await findMarksByGroupName(prism, 'line0_hoverRule', 'line'); + const highlightRule = await findMarksByGroupName(chart, 'line0_hoverRule', 'line'); expect(highlightRule).toBeInTheDocument(); - const highlightPoint = await findMarksByGroupName(prism, 'line0_point'); + const highlightPoint = await findMarksByGroupName(chart, 'line0_point'); expect(highlightPoint).toBeInTheDocument(); // click on chart which should hide the popover and the highlight visuals - await userEvent.click(prism); + await userEvent.click(chart); await waitFor(() => expect(popover).not.toBeInTheDocument()); expect(highlightRule).not.toBeInTheDocument(); expect(highlightPoint).not.toBeInTheDocument(); @@ -136,13 +136,13 @@ describe('ChartPopover', () => { test('Dodged bar popover opens on mark click and closes when clicking outside', async () => { render(<DodgedBarChart {...DodgedBarChart.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); - let bars = getAllMarksByGroupName(prism, 'bar0'); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + let bars = getAllMarksByGroupName(chart, 'bar0'); // clicking the bar should open the popover await clickNthElement(bars, 4); - const popover = await screen.findByTestId('prism-popover'); + const popover = await screen.findByTestId('rsc-popover'); await waitFor(() => expect(popover).toBeInTheDocument()); // waitFor to give the popover time to make sure it doesn't close // check the content of the popover @@ -150,7 +150,7 @@ describe('ChartPopover', () => { expect(within(popover).getByText('Browser: Firefox')).toBeInTheDocument(); expect(within(popover).getByText('Users: 3')).toBeInTheDocument(); - bars = getAllMarksByGroupName(prism, 'bar0'); + bars = getAllMarksByGroupName(chart, 'bar0'); // validate the highlight visuals are present expect(bars[0]).toHaveAttribute('fill-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); diff --git a/src/stories/components/ChartTooltip/ChartTooltip.story.tsx b/src/stories/components/ChartTooltip/ChartTooltip.story.tsx index c7ec93fa7..66deeefc1 100644 --- a/src/stories/components/ChartTooltip/ChartTooltip.story.tsx +++ b/src/stories/components/ChartTooltip/ChartTooltip.story.tsx @@ -12,15 +12,15 @@ import React, { ReactElement } from 'react'; import { ChartTooltip } from '@components/ChartTooltip/ChartTooltip'; -import usePrismProps from '@hooks/usePrismProps'; -import { Area, Bar, Datum, Line, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Area, Bar, Chart, Datum, Line } from '@rsc'; import { browserData as data } from '@stories/data/data'; import { formatTimestamp } from '@stories/storyUtils'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; export default { - title: 'Prism/ChartTooltip', + title: 'RSC/ChartTooltip', component: ChartTooltip, argTypes: { children: { @@ -40,23 +40,23 @@ export default { }; const StackedBarTooltipStory: ComponentStory<typeof ChartTooltip> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 600 }); + const chartProps = useChartProps({ data, width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Bar color="series"> <ChartTooltip {...args} /> </Bar> - </Prism> + </Chart> ); }; const DodgedBarTooltipStory: ComponentStory<typeof ChartTooltip> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 600 }); + const chartProps = useChartProps({ data, width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Bar type="dodged" color="series"> <ChartTooltip {...args} /> </Bar> - </Prism> + </Chart> ); }; @@ -78,13 +78,13 @@ const lineData = [ ]; const LineTooltipStory: ComponentStory<typeof ChartTooltip> = (args): ReactElement => { - const prismProps = usePrismProps({ data: lineData, width: 600 }); + const chartProps = useChartProps({ data: lineData, width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Line color="series"> <ChartTooltip {...args} /> </Line> - </Prism> + </Chart> ); }; @@ -98,13 +98,13 @@ interface LineData extends Datum { } const AreaTooltipStory: ComponentStory<typeof ChartTooltip> = (args): ReactElement => { - const prismProps = usePrismProps({ data: lineData, width: 600 }); + const chartProps = useChartProps({ data: lineData, width: 600 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Area> <ChartTooltip {...args} /> </Area> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/ChartTooltip/ChartTooltip.test.tsx b/src/stories/components/ChartTooltip/ChartTooltip.test.tsx index fb613b9c8..19e79fe3a 100644 --- a/src/stories/components/ChartTooltip/ChartTooltip.test.tsx +++ b/src/stories/components/ChartTooltip/ChartTooltip.test.tsx @@ -9,20 +9,22 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; import { HIGHLIGHT_CONTRAST_RATIO } from '@constants'; import '@matchMediaMock'; -import { ChartTooltip } from '@prism'; +import { ChartTooltip } from '@rsc'; import { findAllMarksByGroupName, + findChart, findMarksByGroupName, - findPrism, getAllMarksByGroupName, hoverNthElement, + render, + screen, unhoverNthElement, + within, } from '@test-utils'; -import { render, screen, within } from '@testing-library/react'; -import React from 'react'; import { DodgedBarChart, LineChart, StackedBarChart } from './ChartTooltip.story'; @@ -34,15 +36,15 @@ describe('ChartTooltip', () => { test('StackedBarChart renders properly', async () => { render(<StackedBarChart {...StackedBarChart.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get bars - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); // hover and validate all hover interactions await hoverNthElement(bars, 0); - const tooltip = await screen.findByTestId('prism-tooltip'); + const tooltip = await screen.findByTestId('rsc-tooltip'); expect(tooltip).toBeInTheDocument(); expect(within(tooltip).getByText('Operating system: Windows')).toBeInTheDocument(); expect(bars[1].getAttribute('fill-opacity')).toEqual(`${1 / HIGHLIGHT_CONTRAST_RATIO}`); @@ -54,22 +56,22 @@ describe('ChartTooltip', () => { test('Line renders properly and hover works as expected', async () => { render(<LineChart {...LineChart.args} />); - // validate prism drew - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + // validate chart drew + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get voronoi paths - const paths = await findAllMarksByGroupName(prism, 'line0_voronoi'); + const paths = await findAllMarksByGroupName(chart, 'line0_voronoi'); // hover and validate all hover components are visible await hoverNthElement(paths, 0); - const tooltip = await screen.findByTestId('prism-tooltip'); + const tooltip = await screen.findByTestId('rsc-tooltip'); expect(tooltip).toBeInTheDocument(); expect(within(tooltip).getByText('Nov 8')).toBeInTheDocument(); - const highlightRule = await findMarksByGroupName(prism, 'line0_hoverRule', 'line'); + const highlightRule = await findMarksByGroupName(chart, 'line0_hoverRule', 'line'); expect(highlightRule).toBeInTheDocument(); - const highlightPoint = await findMarksByGroupName(prism, 'line0_point'); + const highlightPoint = await findMarksByGroupName(chart, 'line0_point'); expect(highlightPoint).toBeInTheDocument(); // unhover and validate the highlights go away @@ -81,13 +83,13 @@ describe('ChartTooltip', () => { test('Dodged bar tooltip opens on hover and bar is highlighted correctly', async () => { render(<DodgedBarChart {...DodgedBarChart.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); - const bars = getAllMarksByGroupName(prism, 'bar0'); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + const bars = getAllMarksByGroupName(chart, 'bar0'); // clicking the bar should open the popover await hoverNthElement(bars, 4); - const tooltip = await screen.findByTestId('prism-tooltip'); + const tooltip = await screen.findByTestId('rsc-tooltip'); expect(tooltip).toBeInTheDocument(); // check the content of the popover diff --git a/src/stories/components/Legend/Legend.story.tsx b/src/stories/components/Legend/Legend.story.tsx index 600bec493..0e292e365 100644 --- a/src/stories/components/Legend/Legend.story.tsx +++ b/src/stories/components/Legend/Legend.story.tsx @@ -9,12 +9,12 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import { Legend } from '@rsc'; -import { Legend } from '@prism'; import { LegendBarStory, LegendDisconnectedStory, defaultProps } from './LegendStoryUtils'; export default { - title: 'Prism/Legend', + title: 'RSC/Legend', component: Legend, parameters: { docs: { diff --git a/src/stories/components/Legend/Legend.test.tsx b/src/stories/components/Legend/Legend.test.tsx index 11e0d976d..ea70987d2 100644 --- a/src/stories/components/Legend/Legend.test.tsx +++ b/src/stories/components/Legend/Legend.test.tsx @@ -9,12 +9,12 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -import '@matchMediaMock'; -import { clickNthElement, findPrism, getAllLegendEntries, hoverNthElement, render, screen } from '@test-utils'; import React from 'react'; import { Legend } from '@components/Legend'; +import '@matchMediaMock'; +import { clickNthElement, findChart, getAllLegendEntries, hoverNthElement, render, screen } from '@test-utils'; + import { Basic, Descriptions, LabelLimit, OnClick, Position, Supreme, Title } from './Legend.story'; describe('Legend', () => { @@ -37,9 +37,9 @@ describe('Legend', () => { const view = await screen.findByRole('graphics-document'); expect(view).toBeInTheDocument(); - const prism = await findPrism(); + const chart = await findChart(); - const legendEntries = getAllLegendEntries(prism); + const legendEntries = getAllLegendEntries(chart); expect(legendEntries.length).toBe(3); for (const entry of legendEntries) { @@ -65,34 +65,34 @@ describe('Legend', () => { test('Supreme renders properly', async () => { render(<Supreme {...Supreme.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const entries = getAllLegendEntries(prism); + const entries = getAllLegendEntries(chart); await hoverNthElement(entries, 0); // make sure tooltip is visible - const tooltip = await screen.findByTestId('prism-tooltip'); + const tooltip = await screen.findByTestId('rsc-tooltip'); expect(tooltip).toBeInTheDocument(); }); test('Supreme with no descriptions', async () => { render(<Supreme {...Supreme.args} descriptions={[]} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const entries = getAllLegendEntries(prism); + const entries = getAllLegendEntries(chart); await hoverNthElement(entries, 0); - const tooltip = screen.queryByTestId('prism-tooltip'); + const tooltip = screen.queryByTestId('rsc-tooltip'); expect(tooltip).not.toBeInTheDocument(); }); test('should call onClick callback when selecting a legend entry', async () => { const onClick = jest.fn(); render(<OnClick {...OnClick.args} onClick={onClick} />); - const prism = await findPrism(); - const entries = getAllLegendEntries(prism); + const chart = await findChart(); + const entries = getAllLegendEntries(chart); await clickNthElement(entries, 0); expect(onClick).toHaveBeenCalledWith('Windows'); @@ -106,21 +106,21 @@ describe('Legend', () => { test('respects labelLimit prop if provided (shorter than default limit)', async () => { render(<LabelLimit {...LabelLimit.args} labelLimit={30} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); expect( - screen.queryByText('Very long Windows label that will be truncated without a custom labelLimit'), + screen.queryByText('Very long Windows label that will be truncated without a custom labelLimit') ).not.toBeInTheDocument(); }); test('respects labelLimit prop if provided (longer than default limit)', async () => { render(<LabelLimit {...LabelLimit.args} labelLimit={300} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); expect( - screen.queryByText('Very long Windows label that will be truncated without a custom labelLimit'), + screen.queryByText('Very long Windows label that will be truncated without a custom labelLimit') ).toBeInTheDocument(); }); diff --git a/src/stories/components/Legend/LegendHideShow.story.tsx b/src/stories/components/Legend/LegendHideShow.story.tsx index bc6897967..9c03fe822 100644 --- a/src/stories/components/Legend/LegendHideShow.story.tsx +++ b/src/stories/components/Legend/LegendHideShow.story.tsx @@ -9,12 +9,12 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import { Legend } from '@rsc'; -import { Legend } from '@prism'; import { LegendBarHiddenSeriesStory, LegendBarStory, defaultProps } from './LegendStoryUtils'; export default { - title: 'Prism/Legend/Hide Show', + title: 'RSC/Legend/Hide Show', component: Legend, parameters: { docs: { diff --git a/src/stories/components/Legend/LegendHideShow.test.tsx b/src/stories/components/Legend/LegendHideShow.test.tsx index f0edb1467..39d9bfedf 100644 --- a/src/stories/components/Legend/LegendHideShow.test.tsx +++ b/src/stories/components/Legend/LegendHideShow.test.tsx @@ -9,30 +9,30 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; import '@matchMediaMock'; import { clickNthElement, findAllMarksByGroupName, - findPrism, + findChart, getAllLegendEntries, getAllLegendSymbols, hoverNthElement, render, screen, } from '@test-utils'; -import React from 'react'; - import { spectrumColors } from '@themes'; + import { DefaultHiddenSeries, HiddenSeries, IsToggleable } from './LegendHideShow.story'; const colors = spectrumColors.light; test('Clicking an entry in the legend should hide that series.', async () => { render(<IsToggleable {...IsToggleable.args} />); - const prism = await findPrism(); + const chart = await findChart(); - let bars = await findAllMarksByGroupName(prism, 'bar0'); + let bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(9); // all series should be visible expect(bars[0]).toHaveAttribute('fill', colors['categorical-100']); @@ -41,10 +41,10 @@ test('Clicking an entry in the legend should hide that series.', async () => { expect(bars[3]).toHaveAttribute('fill', colors['categorical-100']); // clicking on the first series should hide it - const entries = getAllLegendEntries(prism); + const entries = getAllLegendEntries(chart); await clickNthElement(entries, 0); - bars = await findAllMarksByGroupName(prism, 'bar0'); + bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(6); // first series should be hidden expect(bars[0]).toHaveAttribute('fill', colors['categorical-200']); @@ -54,18 +54,18 @@ test('Clicking an entry in the legend should hide that series.', async () => { test('Hidden series should have the correct legend styling', async () => { render(<IsToggleable {...IsToggleable.args} />); - const prism = await findPrism(); + const chart = await findChart(); - let symbols = getAllLegendSymbols(prism); + let symbols = getAllLegendSymbols(chart); expect(symbols[0]).toHaveAttribute('fill', colors['categorical-100']); expect(symbols[0]).toHaveAttribute('stroke', colors['categorical-100']); expect(screen.getByText('Windows')).toHaveAttribute('fill', colors['gray-700']); // clicking on the first series should hide it - const entries = getAllLegendEntries(prism); + const entries = getAllLegendEntries(chart); await clickNthElement(entries, 0); - symbols = getAllLegendSymbols(prism); + symbols = getAllLegendSymbols(chart); expect(symbols[0]).toHaveAttribute('fill', colors['gray-300']); expect(symbols[0]).toHaveAttribute('stroke', colors['gray-300']); expect(screen.getByText('Windows')).toHaveAttribute('fill', colors['gray-500']); @@ -73,9 +73,9 @@ test('Hidden series should have the correct legend styling', async () => { test('HiddenSeries should not be drawn to bar chart', async () => { render(<HiddenSeries {...HiddenSeries.args} />); - const prism = await findPrism(); + const chart = await findChart(); - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(6); // second series should be hidden expect(bars[0]).toHaveAttribute('fill', colors['categorical-100']); @@ -89,33 +89,33 @@ test('HiddenSeries should not be drawn to bar chart', async () => { test('DefaultHiddenSeries should be hidden on render', async () => { render(<DefaultHiddenSeries {...DefaultHiddenSeries.args} />); - const prism = await findPrism(); + const chart = await findChart(); - let bars = await findAllMarksByGroupName(prism, 'bar0'); + let bars = await findAllMarksByGroupName(chart, 'bar0'); // there should only be 6 bars (2 series 3 categories) expect(bars.length).toEqual(6); - const entries = getAllLegendEntries(prism); + const entries = getAllLegendEntries(chart); await clickNthElement(entries, 2); - bars = await findAllMarksByGroupName(prism, 'bar0'); + bars = await findAllMarksByGroupName(chart, 'bar0'); // there should now be 9 bars (3 series 3 categories) expect(bars.length).toEqual(9); }); test('Hidden series should not highlight any marks', async () => { render(<DefaultHiddenSeries {...DefaultHiddenSeries.args} />); - const prism = await findPrism(); + const chart = await findChart(); - const entries = getAllLegendEntries(prism); + const entries = getAllLegendEntries(chart); // hovering the second entry should lower the opacity of the first series await hoverNthElement(entries, 1); - let bars = await findAllMarksByGroupName(prism, 'bar0'); + let bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars[0]).toHaveAttribute('fill-opacity', '0.2'); // hovering the third entry should not adjust the opcity of any of the bars since it is a hidden series await hoverNthElement(entries, 2); - bars = await findAllMarksByGroupName(prism, 'bar0'); + bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars[0]).toHaveAttribute('fill-opacity', '1'); }); diff --git a/src/stories/components/Legend/LegendHighlight.story.tsx b/src/stories/components/Legend/LegendHighlight.story.tsx index 39abb893c..b517b3c22 100644 --- a/src/stories/components/Legend/LegendHighlight.story.tsx +++ b/src/stories/components/Legend/LegendHighlight.story.tsx @@ -9,12 +9,12 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import { Legend } from '@rsc'; -import { Legend } from '@prism'; import { LegendBarHighlightedSeriesStory, LegendBarStory, defaultProps } from './LegendStoryUtils'; export default { - title: 'Prism/Legend/Highlight', + title: 'RSC/Legend/Highlight', component: Legend, parameters: { docs: { diff --git a/src/stories/components/Legend/LegendHighlight.test.tsx b/src/stories/components/Legend/LegendHighlight.test.tsx index 659d4a347..b0909e2e6 100644 --- a/src/stories/components/Legend/LegendHighlight.test.tsx +++ b/src/stories/components/Legend/LegendHighlight.test.tsx @@ -11,16 +11,16 @@ */ import React from 'react'; -import { findAllMarksByGroupName, findPrism, getAllLegendEntries, hoverNthElement, render, screen } from '@test-utils'; +import { findAllMarksByGroupName, findChart, getAllLegendEntries, hoverNthElement, render, screen } from '@test-utils'; import { Basic, Controlled } from './LegendHighlight.story'; describe('Controlled', () => { test('non highlighted series bars should have opacity applied', async () => { render(<Controlled {...Controlled.args} />); - const prism = await findPrism(); + const chart = await findChart(); - const bars = await findAllMarksByGroupName(prism, 'bar0'); + const bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(9); expect(bars[0]).toHaveAttribute('fill-opacity', '0.2'); expect(bars[1]).toHaveAttribute('fill-opacity', '1'); @@ -33,9 +33,9 @@ describe('Controlled', () => { test('non highlighted series legend symbols should have opacity applied', async () => { render(<Controlled {...Controlled.args} />); - const prism = await findPrism(); + const chart = await findChart(); - const legendSymbols = await findAllMarksByGroupName(prism, 'role-legend-symbol'); + const legendSymbols = await findAllMarksByGroupName(chart, 'role-legend-symbol'); expect(legendSymbols.length).toEqual(3); expect(legendSymbols[0]).toHaveAttribute('fill-opacity', '0.2'); expect(legendSymbols[1]).toHaveAttribute('fill-opacity', '1'); @@ -48,9 +48,9 @@ describe('Controlled', () => { test('non highlighted series legend labels should have opacity applied', async () => { render(<Controlled {...Controlled.args} />); - const prism = await findPrism(); + const chart = await findChart(); - const legendLabels = await findAllMarksByGroupName(prism, 'role-legend-symbol'); + const legendLabels = await findAllMarksByGroupName(chart, 'role-legend-symbol'); expect(legendLabels.length).toEqual(3); expect(legendLabels[0]).toHaveAttribute('fill-opacity', '0.2'); expect(legendLabels[1]).toHaveAttribute('fill-opacity', '1'); @@ -67,9 +67,9 @@ describe('Uncontrolled', () => { test('hovering over legend items highlights the bars with matching series', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); + const chart = await findChart(); - let bars = await findAllMarksByGroupName(prism, 'bar0'); + let bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars.length).toEqual(9); expect(bars[0]).toHaveAttribute('fill-opacity', '1'); expect(bars[1]).toHaveAttribute('fill-opacity', '1'); @@ -79,10 +79,10 @@ describe('Uncontrolled', () => { expect(bars[1]).toHaveAttribute('stroke-opacity', '1'); expect(bars[2]).toHaveAttribute('stroke-opacity', '1'); - const legendEntries = getAllLegendEntries(prism); + const legendEntries = getAllLegendEntries(chart); await hoverNthElement(legendEntries, 0); - bars = await findAllMarksByGroupName(prism, 'bar0'); + bars = await findAllMarksByGroupName(chart, 'bar0'); expect(bars[0]).toHaveAttribute('fill-opacity', '1'); expect(bars[1]).toHaveAttribute('fill-opacity', '0.2'); expect(bars[2]).toHaveAttribute('fill-opacity', '0.2'); @@ -94,9 +94,9 @@ describe('Uncontrolled', () => { test('hovering over legend items adds opacity to the non hovered legend symbols', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); + const chart = await findChart(); - let legendSymbols = await findAllMarksByGroupName(prism, 'role-legend-symbol'); + let legendSymbols = await findAllMarksByGroupName(chart, 'role-legend-symbol'); expect(legendSymbols.length).toEqual(3); expect(legendSymbols[0]).toHaveAttribute('fill-opacity', '1'); expect(legendSymbols[1]).toHaveAttribute('fill-opacity', '1'); @@ -106,10 +106,10 @@ describe('Uncontrolled', () => { expect(legendSymbols[1]).toHaveAttribute('stroke-opacity', '1'); expect(legendSymbols[2]).toHaveAttribute('stroke-opacity', '1'); - const legendEntries = getAllLegendEntries(prism); + const legendEntries = getAllLegendEntries(chart); await hoverNthElement(legendEntries, 0); - legendSymbols = await findAllMarksByGroupName(prism, 'role-legend-symbol'); + legendSymbols = await findAllMarksByGroupName(chart, 'role-legend-symbol'); expect(legendSymbols[0]).toHaveAttribute('fill-opacity', '1'); expect(legendSymbols[1]).toHaveAttribute('fill-opacity', '0.2'); expect(legendSymbols[2]).toHaveAttribute('fill-opacity', '0.2'); @@ -121,18 +121,18 @@ describe('Uncontrolled', () => { test('hovering over legend items adds opacity to the non hovered legend labels', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); + const chart = await findChart(); - let legendLabels = await findAllMarksByGroupName(prism, 'role-legend-symbol'); + let legendLabels = await findAllMarksByGroupName(chart, 'role-legend-symbol'); expect(legendLabels.length).toEqual(3); expect(legendLabels[0]).toHaveAttribute('fill-opacity', '1'); expect(legendLabels[1]).toHaveAttribute('fill-opacity', '1'); expect(legendLabels[2]).toHaveAttribute('fill-opacity', '1'); - const legendEntries = getAllLegendEntries(prism); + const legendEntries = getAllLegendEntries(chart); await hoverNthElement(legendEntries, 0); - legendLabels = await findAllMarksByGroupName(prism, 'role-legend-symbol'); + legendLabels = await findAllMarksByGroupName(chart, 'role-legend-symbol'); expect(legendLabels.length).toEqual(3); expect(legendLabels[0]).toHaveAttribute('fill-opacity', '1'); expect(legendLabels[1]).toHaveAttribute('fill-opacity', '0.2'); diff --git a/src/stories/components/Legend/LegendStoryUtils.tsx b/src/stories/components/Legend/LegendStoryUtils.tsx index 081fbb28d..266cef771 100644 --- a/src/stories/components/Legend/LegendStoryUtils.tsx +++ b/src/stories/components/Legend/LegendStoryUtils.tsx @@ -9,55 +9,55 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Bar, Legend, LegendProps, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Bar, Chart, Legend, LegendProps } from '@rsc'; import { browserData as data } from '@stories/data/data'; import { ComponentStory } from '@storybook/react'; -import React, { ReactElement } from 'react'; export const LegendBarStory: ComponentStory<typeof Legend> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 700 }); + const chartProps = useChartProps({ data, width: 700 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Bar color="series" /> <Legend {...args} /> <Axis position="bottom" baseline /> <Axis position="left" grid /> - </Prism> + </Chart> ); }; export const LegendBarHighlightedSeriesStory: ComponentStory<typeof Legend> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 700, highlightedSeries: 'Mac' }); + const chartProps = useChartProps({ data, width: 700, highlightedSeries: 'Mac' }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Bar color="series" /> <Legend {...args} /> <Axis position="bottom" baseline /> <Axis position="left" grid /> - </Prism> + </Chart> ); }; export const LegendBarHiddenSeriesStory: ComponentStory<typeof Legend> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 700, hiddenSeries: ['Mac'] }); + const chartProps = useChartProps({ data, width: 700, hiddenSeries: ['Mac'] }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Bar color="series" /> <Legend {...args} /> <Axis position="bottom" baseline /> <Axis position="left" grid /> - </Prism> + </Chart> ); }; export const LegendDisconnectedStory: ComponentStory<typeof Legend> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 700, height: 50 }); + const chartProps = useChartProps({ data, width: 700, height: 50 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Legend {...args} /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Legend/LegendSymbol.story.tsx b/src/stories/components/Legend/LegendSymbol.story.tsx index 539e838db..c90de7a45 100644 --- a/src/stories/components/Legend/LegendSymbol.story.tsx +++ b/src/stories/components/Legend/LegendSymbol.story.tsx @@ -9,17 +9,18 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from 'react'; -import usePrismProps from '@hooks/usePrismProps'; -import { Bar, Legend, Line, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Bar, Chart, Legend, Line } from '@rsc'; import { browserData as data } from '@stories/data/data'; import { ComponentStory } from '@storybook/react'; -import React, { ReactElement } from 'react'; import { ROUNDED_SQUARE_PATH } from 'svgPaths'; + import { defaultProps } from './LegendStoryUtils'; export default { - title: 'Prism/Legend/Symbols', + title: 'RSC/Legend/Symbols', component: Legend, argTypes: {}, parameters: { @@ -32,21 +33,21 @@ export default { }; const LegendBarStory: ComponentStory<typeof Legend> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 700, symbolShapes: ['square', 'triangle', ROUNDED_SQUARE_PATH] }); + const chartProps = useChartProps({ data, width: 700, symbolShapes: ['square', 'triangle', ROUNDED_SQUARE_PATH] }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Bar color="series" /> <Legend {...args} /> - </Prism> + </Chart> ); }; const LegendLineStory: ComponentStory<typeof Legend> = (args): ReactElement => { - const prismProps = usePrismProps({ data, width: 700 }); + const chartProps = useChartProps({ data, width: 700 }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Line dimension="category" lineType="series" color="series" scaleType="point" /> <Legend {...args} /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Legend/LegendSymbol.test.tsx b/src/stories/components/Legend/LegendSymbol.test.tsx index db033fa59..2abd281b7 100644 --- a/src/stories/components/Legend/LegendSymbol.test.tsx +++ b/src/stories/components/Legend/LegendSymbol.test.tsx @@ -12,7 +12,7 @@ import React from 'react'; import '@matchMediaMock'; -import { findPrism, getAllLegendSymbols, render, screen } from '@test-utils'; +import { findChart, getAllLegendSymbols, render, screen } from '@test-utils'; import { spectrumColors } from '@themes'; import { Color, LineType, LineWidth, Opacity, Supreme, Symbols } from './LegendSymbol.story'; @@ -27,38 +27,38 @@ test('Symbols renders properly', async () => { test('Color renders correctly', async () => { render(<Color {...Color.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const symbols = getAllLegendSymbols(prism); + const symbols = getAllLegendSymbols(chart); expect(symbols[0].getAttribute('fill')).toEqual(colors['gray-700']); expect(symbols[0].getAttribute('stroke')).toEqual(colors['gray-700']); }); test('LineType renders correctly', async () => { render(<LineType {...LineType.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const symbols = getAllLegendSymbols(prism); + const symbols = getAllLegendSymbols(chart); expect(symbols[0].getAttribute('stroke-dasharray')).toEqual(''); }); test('LineWidth renders correctly', async () => { render(<LineWidth {...LineWidth.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const symbols = getAllLegendSymbols(prism); + const symbols = getAllLegendSymbols(chart); expect(symbols[0].getAttribute('stroke-width')).toEqual('1'); }); test('Opacity renders correctly', async () => { render(<Opacity {...Opacity.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const symbols = getAllLegendSymbols(prism); + const symbols = getAllLegendSymbols(chart); expect(symbols[0].getAttribute('fill-opacity')).toEqual('1'); expect(symbols[1].getAttribute('fill-opacity')).toEqual('0.75'); expect(symbols[2].getAttribute('fill-opacity')).toEqual('0.5'); @@ -66,10 +66,10 @@ test('Opacity renders correctly', async () => { test('Symbols renders correctly', async () => { render(<Symbols {...Symbols.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const symbols = getAllLegendSymbols(prism); + const symbols = getAllLegendSymbols(chart); // Square SVG path expect(symbols[0].getAttribute('d')).toEqual('M-7.906,-7.906h15.811v15.811h-15.811Z'); // Triangle SVG path @@ -82,10 +82,10 @@ test('Symbols renders correctly', async () => { test('Supreme renders correctly', async () => { render(<Supreme {...Supreme.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const symbols = getAllLegendSymbols(prism); + const symbols = getAllLegendSymbols(chart); expect(symbols[0].getAttribute('stroke-dasharray')).toEqual(''); expect(symbols[1].getAttribute('stroke-dasharray')).toEqual('7,4'); expect(symbols[2].getAttribute('stroke-dasharray')).toEqual('2,3'); diff --git a/src/stories/components/Legend/legendHover.story.tsx b/src/stories/components/Legend/legendHover.story.tsx index 22ddc354a..ae8600ff8 100644 --- a/src/stories/components/Legend/legendHover.story.tsx +++ b/src/stories/components/Legend/legendHover.story.tsx @@ -9,12 +9,12 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import { Legend } from '@rsc'; -import { Legend } from '@prism'; import { LegendBarStory, defaultProps } from './LegendStoryUtils'; export default { - title: 'Prism/Legend/Hover', + title: 'RSC/Legend/Hover', component: Legend, parameters: { docs: { diff --git a/src/stories/components/Legend/legendHover.test.tsx b/src/stories/components/Legend/legendHover.test.tsx index a2eee417c..86c4b4e6e 100644 --- a/src/stories/components/Legend/legendHover.test.tsx +++ b/src/stories/components/Legend/legendHover.test.tsx @@ -9,19 +9,19 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -import { findPrism, getAllLegendEntries, hoverNthElement, render, unhoverNthElement } from '@test-utils'; import React from 'react'; +import { findChart, getAllLegendEntries, hoverNthElement, render, unhoverNthElement } from '@test-utils'; + import { ControlledHover } from './legendHover.story'; test('Mousing over a legend item should trigger callback function.', async () => { const onMouseOver = jest.fn(); const onMouseOut = jest.fn(); render(<ControlledHover {...ControlledHover.args} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />); - const prism = await findPrism(); + const chart = await findChart(); - const entries = getAllLegendEntries(prism); + const entries = getAllLegendEntries(chart); await hoverNthElement(entries, 0); await unhoverNthElement(entries, 0); diff --git a/src/stories/components/Line/Line.story.tsx b/src/stories/components/Line/Line.story.tsx index c686c4c1a..806aadc90 100644 --- a/src/stories/components/Line/Line.story.tsx +++ b/src/stories/components/Line/Line.story.tsx @@ -12,16 +12,16 @@ import React, { ReactElement } from 'react'; import { ReferenceLine } from '@components/ReferenceLine'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Bar, ChartTooltip, Legend, Line, Prism } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Bar, Chart, ChartTooltip, Legend, Line } from '@rsc'; import { workspaceTrendsData, workspaceTrendsDataWithVisiblePoints } from '@stories/data/data'; import { formatTimestamp } from '@stories/storyUtils'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from '@test-utils'; -import { PrismProps } from 'types'; +import { ChartProps } from 'types'; export default { - title: 'Prism/Line', + title: 'RSC/Line', component: Line, argTypes: {}, parameters: { @@ -64,82 +64,82 @@ const historicalCompareData = [ { datetime: 1668409200000, users: 4913, series: 'Add Freeform table', period: 'Current' }, ]; -const defaultPrismProps: PrismProps = { data: workspaceTrendsData, minWidth: 400, maxWidth: 800, height: 400 }; +const defaultChartProps: ChartProps = { data: workspaceTrendsData, minWidth: 400, maxWidth: 800, height: 400 }; const BasicLineStory: ComponentStory<typeof Line> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Line {...args} /> <Legend lineWidth={{ value: 0 }} /> - </Prism> + </Chart> ); }; const LinearStory: ComponentStory<typeof Line> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="linear" baseline ticks> <ReferenceLine value={13} /> </Axis> <Line {...args} /> - </Prism> + </Chart> ); }; const LineStory: ComponentStory<typeof Line> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" baseline ticks /> <Line {...args} /> <Legend highlight /> - </Prism> + </Chart> ); }; const ComboStory: ComponentStory<typeof Line> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" baseline ticks /> <Bar dimension="datetime" metric="users" opacity={{ value: 0.75 }} /> <Line {...args} /> <Legend highlight /> - </Prism> + </Chart> ); }; const HistoricalCompareStory: ComponentStory<typeof Line> = (args): ReactElement => { - const prismProps = usePrismProps({ - ...defaultPrismProps, + const chartProps = useChartProps({ + ...defaultChartProps, data: historicalCompareData, width: 600, opacities: [0.5, 1], lineTypes: ['dotted', 'solid'], }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" baseline ticks /> <Line {...args} /> <Legend highlight opacity="period" /> - </Prism> + </Chart> ); }; const LineWithVisiblePointsStory: ComponentStory<typeof Line> = (args): ReactElement => { - const prismProps = usePrismProps({ ...defaultPrismProps, data: workspaceTrendsDataWithVisiblePoints }); + const chartProps = useChartProps({ ...defaultChartProps, data: workspaceTrendsDataWithVisiblePoints }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" baseline ticks /> <Line {...args} /> <Legend highlight /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Line/Line.test.tsx b/src/stories/components/Line/Line.test.tsx index b67bf32df..20602f7e2 100644 --- a/src/stories/components/Line/Line.test.tsx +++ b/src/stories/components/Line/Line.test.tsx @@ -9,20 +9,22 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; import { HIGHLIGHT_CONTRAST_RATIO } from '@constants'; import '@matchMediaMock'; -import { Line } from '@prism'; +import { Line } from '@rsc'; import { findAllMarksByGroupName, - findPrism, + findChart, getAllLegendEntries, getAllLegendSymbols, hoverNthElement, + render, + screen, unhoverNthElement, + within, } from '@test-utils'; -import { render, screen, within } from '@testing-library/react'; -import React from 'react'; import { Basic, @@ -45,11 +47,11 @@ describe('Line', () => { test('Basic renders', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get lines - const lines = await findAllMarksByGroupName(prism, 'line0'); + const lines = await findAllMarksByGroupName(chart, 'line0'); expect(lines.length).toEqual(4); }); @@ -68,11 +70,11 @@ describe('Line', () => { test('LineType renders', async () => { render(<LineType {...LineType.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get lines - const lines = await findAllMarksByGroupName(prism, 'line0'); + const lines = await findAllMarksByGroupName(chart, 'line0'); expect(lines.length).toEqual(4); expect(lines[0].getAttribute('stroke-dasharray')).toEqual(''); expect(lines[1].getAttribute('stroke-dasharray')).toEqual('7,4'); @@ -82,22 +84,22 @@ describe('Line', () => { test('Opacity renders', async () => { render(<Opacity {...Opacity.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get lines - const lines = await findAllMarksByGroupName(prism, 'line0'); + const lines = await findAllMarksByGroupName(chart, 'line0'); expect(lines.length).toEqual(4); expect(lines[0].getAttribute('stroke-opacity')).toEqual('0.6'); }); test('HistoricalCompare renders', async () => { render(<HistoricalCompare {...HistoricalCompare.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get lines - const lines = await findAllMarksByGroupName(prism, 'line0'); + const lines = await findAllMarksByGroupName(chart, 'line0'); expect(lines.length).toEqual(4); // dotted teal line expect(lines[0].getAttribute('stroke-dasharray')).toEqual('2,3'); @@ -115,15 +117,15 @@ describe('Line', () => { test('Hovering over the entries on HistoricalCompare should highlight hovered series', async () => { render(<HistoricalCompare {...HistoricalCompare.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const entries = getAllLegendEntries(prism); + const entries = getAllLegendEntries(chart); expect(entries.length).toEqual(4); await hoverNthElement(entries, 0); // symbol stroke and fill opacity should be divided by the HIGHLIGHT_CONTRAST_RATIO for all but the first symbol - let symbols = getAllLegendSymbols(prism); + let symbols = getAllLegendSymbols(chart); expect(symbols[0]).toHaveAttribute('fill-opacity', '0.5'); expect(symbols[0]).toHaveAttribute('stroke-opacity', '1'); expect(symbols[1]).toHaveAttribute('fill-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); @@ -134,7 +136,7 @@ describe('Line', () => { expect(symbols[3]).toHaveAttribute('stroke-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); // stroke opacity should be divided by the HIGHLIGHT_CONTRAST_RATIO for all but the first line - let lines = await findAllMarksByGroupName(prism, 'line0'); + let lines = await findAllMarksByGroupName(chart, 'line0'); expect(lines[0]).toHaveAttribute('stroke-opacity', '1'); expect(lines[1]).toHaveAttribute('stroke-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); expect(lines[2]).toHaveAttribute('stroke-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); @@ -144,7 +146,7 @@ describe('Line', () => { await hoverNthElement(entries, 3); // symbol stroke and fill opacity should be divided by the HIGHLIGHT_CONTRAST_RATIO for all but the last symbol - symbols = getAllLegendSymbols(prism); + symbols = getAllLegendSymbols(chart); expect(symbols[0]).toHaveAttribute('fill-opacity', `${0.5 / HIGHLIGHT_CONTRAST_RATIO}`); expect(symbols[0]).toHaveAttribute('stroke-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); expect(symbols[1]).toHaveAttribute('fill-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); @@ -155,7 +157,7 @@ describe('Line', () => { expect(symbols[3]).toHaveAttribute('stroke-opacity', '1'); // stroke opacity should be divided by the HIGHLIGHT_CONTRAST_RATIO for all but the last line - lines = await findAllMarksByGroupName(prism, 'line0'); + lines = await findAllMarksByGroupName(chart, 'line0'); expect(lines[0]).toHaveAttribute('stroke-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); expect(lines[1]).toHaveAttribute('stroke-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); expect(lines[2]).toHaveAttribute('stroke-opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`); @@ -176,25 +178,25 @@ describe('Line', () => { test('Tooltip should show on hover', async () => { render(<Tooltip {...Tooltip.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); // get voronoi paths - const paths = await findAllMarksByGroupName(prism, 'line0_voronoi'); + const paths = await findAllMarksByGroupName(chart, 'line0_voronoi'); // hover and validate all hover components are visible await hoverNthElement(paths, 0); - const tooltip = await screen.findByTestId('prism-tooltip'); + const tooltip = await screen.findByTestId('rsc-tooltip'); expect(tooltip).toBeInTheDocument(); expect(within(tooltip).getByText('Nov 8')).toBeInTheDocument(); }); test('Static points render', async () => { render(<WithPoints {...WithPoints.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const points = await findAllMarksByGroupName(prism, 'line0_points'); + const points = await findAllMarksByGroupName(chart, 'line0_points'); expect(points.length).toEqual(6); expect(points[0].getAttribute('fill')).toEqual('rgb(15, 181, 174)'); @@ -222,14 +224,14 @@ describe('Line', () => { describe('Static point highlighting when there are interactive children', () => { test('Points show on hover', async () => { render(<WithPointsAndTooltip {...WithPointsAndTooltip.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const paths = await findAllMarksByGroupName(prism, 'line0_voronoi'); + const paths = await findAllMarksByGroupName(chart, 'line0_voronoi'); // hover a place on the line without a static point await hoverNthElement(paths, 0); - const backgroundPoints = await findAllMarksByGroupName(prism, 'line0_pointBackground'); + const backgroundPoints = await findAllMarksByGroupName(chart, 'line0_pointBackground'); expect(backgroundPoints.length).toBe(1); expect(backgroundPoints[0].getAttribute('fill')).toEqual('rgb(255, 255, 255)'); expect(backgroundPoints[0].getAttribute('stroke')).toEqual('rgb(255, 255, 255)'); @@ -237,7 +239,7 @@ describe('Line', () => { expect(backgroundPoints[0]).not.toHaveAttribute('fill-opacity'); expect(backgroundPoints[0]).not.toHaveAttribute('stroke-opacity'); - const hoverPoints = await findAllMarksByGroupName(prism, 'line0_point'); + const hoverPoints = await findAllMarksByGroupName(chart, 'line0_point'); expect(hoverPoints.length).toBe(1); expect(hoverPoints[0].getAttribute('fill')).toEqual('rgb(255, 255, 255)'); expect(hoverPoints[0].getAttribute('stroke')).toEqual('rgb(15, 181, 174)'); @@ -248,10 +250,10 @@ describe('Line', () => { test('Static point hovering', async () => { render(<WithPointsAndTooltip {...WithPointsAndTooltip.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const points = await findAllMarksByGroupName(prism, 'line0_points'); + const points = await findAllMarksByGroupName(chart, 'line0_points'); expect(points.length).toEqual(6); expect(points[0].getAttribute('fill')).toEqual('rgb(15, 181, 174)'); @@ -275,11 +277,11 @@ describe('Line', () => { expect(points[4].getAttribute('stroke-opacity')).toBeNull(); expect(points[5].getAttribute('stroke-opacity')).toBeNull(); - const paths = await findAllMarksByGroupName(prism, 'line0_voronoi'); + const paths = await findAllMarksByGroupName(chart, 'line0_voronoi'); // hover a static point await hoverNthElement(paths, 1); - const backgroundPoints = await findAllMarksByGroupName(prism, 'line0_pointBackground'); + const backgroundPoints = await findAllMarksByGroupName(chart, 'line0_pointBackground'); expect(backgroundPoints.length).toBe(1); expect(backgroundPoints[0].getAttribute('fill')).toEqual('rgb(255, 255, 255)'); expect(backgroundPoints[0].getAttribute('stroke')).toEqual('rgb(255, 255, 255)'); @@ -287,7 +289,7 @@ describe('Line', () => { expect(backgroundPoints[0]).not.toHaveAttribute('fill-opacity'); expect(backgroundPoints[0]).not.toHaveAttribute('stroke-opacity'); - const hoverPoints = await findAllMarksByGroupName(prism, 'line0_point'); + const hoverPoints = await findAllMarksByGroupName(chart, 'line0_point'); expect(hoverPoints.length).toBe(1); expect(hoverPoints[0].getAttribute('fill')).toEqual('rgb(15, 181, 174)'); expect(hoverPoints[0].getAttribute('stroke')).toEqual('rgb(15, 181, 174)'); diff --git a/src/stories/components/MetricRange/MetricRange.story.tsx b/src/stories/components/MetricRange/MetricRange.story.tsx index c4889e794..f4bf48d12 100644 --- a/src/stories/components/MetricRange/MetricRange.story.tsx +++ b/src/stories/components/MetricRange/MetricRange.story.tsx @@ -11,8 +11,8 @@ */ import React, { ReactElement } from 'react'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, ChartPopover, ChartTooltip, Legend, Line, MetricRange, Prism, PrismProps } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Chart, ChartPopover, ChartProps, ChartTooltip, Legend, Line, MetricRange } from '@rsc'; import { workspaceTrendsDataWithAnomalies, workspaceTrendsDataWithExtremeMetricRange } from '@stories/data/data'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from 'test-utils/bindWithProps'; @@ -20,7 +20,7 @@ import { bindWithProps } from 'test-utils/bindWithProps'; import { Content } from '@adobe/react-spectrum'; export default { - title: 'Prism/MetricRange', + title: 'RSC/MetricRange', component: MetricRange, argTypes: {}, parameters: { @@ -32,7 +32,7 @@ export default { }, }; -const defaultPrismProps: PrismProps = { +const defaultChartProps: ChartProps = { data: workspaceTrendsDataWithAnomalies, minWidth: 400, maxWidth: 800, @@ -40,37 +40,37 @@ const defaultPrismProps: PrismProps = { }; const MetricRangeStory: ComponentStory<typeof MetricRange> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" baseline ticks /> <Line color="series"> <MetricRange {...args} /> </Line> <Legend lineWidth={{ value: 0 }} highlight /> - </Prism> + </Chart> ); }; const MetricRangeWithStaticPointsStory: ComponentStory<typeof MetricRange> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" baseline ticks /> <Line color="series" staticPoint="staticPoint"> <MetricRange {...args} /> </Line> <Legend lineWidth={{ value: 0 }} highlight /> - </Prism> + </Chart> ); }; const MetricRangeWithPopoverStory: ComponentStory<typeof MetricRange> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" baseline ticks /> <Line color="series"> @@ -79,24 +79,24 @@ const MetricRangeWithPopoverStory: ComponentStory<typeof MetricRange> = (args): <ChartPopover width={200}>{dialogContent}</ChartPopover> </Line> <Legend lineWidth={{ value: 0 }} highlight /> - </Prism> + </Chart> ); }; const MetricRangeWithScaledAxisStory: ComponentStory<typeof MetricRange> = (args): ReactElement => { - const prismProps = usePrismProps({ - ...defaultPrismProps, + const chartProps = useChartProps({ + ...defaultChartProps, data: workspaceTrendsDataWithExtremeMetricRange, }); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" baseline ticks /> <Line color="series"> <MetricRange {...args} /> </Line> <Legend lineWidth={{ value: 0 }} highlight /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/MetricRange/MetricRange.test.tsx b/src/stories/components/MetricRange/MetricRange.test.tsx index c8e909b3a..b74de91af 100644 --- a/src/stories/components/MetricRange/MetricRange.test.tsx +++ b/src/stories/components/MetricRange/MetricRange.test.tsx @@ -9,11 +9,11 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React from 'react'; import '@matchMediaMock'; -import { MetricRange } from '@prism'; -import { clickNthElement, findAllMarksByGroupName, findPrism, hoverNthElement, render } from '@test-utils'; -import React from 'react'; +import { MetricRange } from '@rsc'; +import { clickNthElement, findAllMarksByGroupName, findChart, hoverNthElement, render } from '@test-utils'; import { Basic, WithHover, WithPopover } from './MetricRange.story'; @@ -25,13 +25,13 @@ describe('MetricRange', () => { test('Basic renders properly', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const metricRange0Children = await findAllMarksByGroupName(prism, 'line0MetricRange0_group', 'g'); + const metricRange0Children = await findAllMarksByGroupName(chart, 'line0MetricRange0_group', 'g'); expect(metricRange0Children).toHaveLength(2); - const metricRange1Children = await findAllMarksByGroupName(prism, 'line0MetricRange0_group', 'g'); + const metricRange1Children = await findAllMarksByGroupName(chart, 'line0MetricRange0_group', 'g'); expect(metricRange1Children).toHaveLength(2); const metricRangeAreas = await findAllMarksByGroupName(metricRange0Children[1], 'line0MetricRange0'); @@ -46,10 +46,10 @@ describe('MetricRange', () => { test('WithHover renders properly', async () => { render(<WithHover {...WithHover.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - let metricRange0Children = await findAllMarksByGroupName(prism, 'line0MetricRange0_group', 'g'); + let metricRange0Children = await findAllMarksByGroupName(chart, 'line0MetricRange0_group', 'g'); expect(metricRange0Children).toHaveLength(2); let metricRangeLines = await findAllMarksByGroupName(metricRange0Children[0], 'line0'); @@ -57,32 +57,32 @@ describe('MetricRange', () => { expect(metricRangeLines[0]).toHaveAttribute('stroke-dasharray', '3,4'); expect(metricRangeLines[0]).toHaveAttribute('stroke-width', '1.5'); - let metricRangeAreas = await findAllMarksByGroupName(prism, 'line0MetricRange0'); + let metricRangeAreas = await findAllMarksByGroupName(chart, 'line0MetricRange0'); expect(metricRangeAreas[0]).toHaveAttribute('opacity', '0.8'); expect(metricRangeAreas[0]).toHaveAttribute('fill-opacity', '0'); - const points = await findAllMarksByGroupName(prism, 'line0_voronoi'); + const points = await findAllMarksByGroupName(chart, 'line0_voronoi'); await hoverNthElement(points, 0); - metricRange0Children = await findAllMarksByGroupName(prism, 'line0MetricRange0_group', 'g'); + metricRange0Children = await findAllMarksByGroupName(chart, 'line0MetricRange0_group', 'g'); metricRangeLines = await findAllMarksByGroupName(metricRange0Children[0], 'line0'); expect(metricRangeLines[0]).toHaveAttribute('stroke-opacity', '1'); - metricRangeAreas = await findAllMarksByGroupName(prism, 'line0MetricRange0'); + metricRangeAreas = await findAllMarksByGroupName(chart, 'line0MetricRange0'); expect(metricRangeAreas[0]).toHaveAttribute('fill-opacity', '0.2'); }); test('Hovered range stays active with popover', async () => { render(<WithPopover {...WithPopover.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const points = await findAllMarksByGroupName(prism, 'line0_voronoi'); + const points = await findAllMarksByGroupName(chart, 'line0_voronoi'); await clickNthElement(points, 0); - const metricRangeChildren = await findAllMarksByGroupName(prism, 'line0MetricRange0_group', 'g'); - const metricRangeAreas = await findAllMarksByGroupName(prism, 'line0MetricRange0'); + const metricRangeChildren = await findAllMarksByGroupName(chart, 'line0MetricRange0_group', 'g'); + const metricRangeAreas = await findAllMarksByGroupName(chart, 'line0MetricRange0'); expect(metricRangeAreas[0]).toHaveAttribute('opacity', '0.8'); expect(metricRangeAreas[0]).toHaveAttribute('fill-opacity', '0.2'); diff --git a/src/stories/components/Title/Title.story.tsx b/src/stories/components/Title/Title.story.tsx index e1b49242e..93690b654 100644 --- a/src/stories/components/Title/Title.story.tsx +++ b/src/stories/components/Title/Title.story.tsx @@ -11,14 +11,14 @@ */ import React, { ReactElement } from 'react'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, Bar, Legend, Prism, PrismProps, Title } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Bar, Chart, ChartProps, Legend, Title } from '@rsc'; import { browserData as data } from '@stories/data/data'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from 'test-utils/bindWithProps'; export default { - title: 'Prism/Title', + title: 'RSC/Title', component: Title, argTypes: {}, parameters: { @@ -30,18 +30,18 @@ export default { }, }; -const defaultPrismProps: PrismProps = { data, minWidth: 400, maxWidth: 800, height: 400 }; +const defaultChartProps: ChartProps = { data, minWidth: 400, maxWidth: 800, height: 400 }; const TitleBarStory: ComponentStory<typeof Title> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Title {...args} /> <Bar color="series" /> <Legend /> <Axis position="bottom" baseline /> <Axis position="left" grid /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Title/Title.test.tsx b/src/stories/components/Title/Title.test.tsx index 81db282ab..e1da1a748 100644 --- a/src/stories/components/Title/Title.test.tsx +++ b/src/stories/components/Title/Title.test.tsx @@ -9,20 +9,21 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - import React from 'react'; -import { findPrism, getAllMarksByGroupName, render } from '@test-utils'; -import { Basic, Position, FontWeight, Orient } from './Title.story'; + import { Title } from '@components/Title'; +import { findChart, getAllMarksByGroupName, render } from '@test-utils'; + +import { Basic, FontWeight, Orient, Position } from './Title.story'; describe('Title', () => { test('Basic renders properly', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const titles = getAllMarksByGroupName(prism, 'role-title-text', 'text'); + const titles = getAllMarksByGroupName(chart, 'role-title-text', 'text'); expect(titles.length).toBe(1); const title = titles[0]; expect(title).toHaveTextContent(Basic.args.text); @@ -37,10 +38,10 @@ describe('Title', () => { test('Position renders properly', async () => { render(<Position {...Position.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const titles = getAllMarksByGroupName(prism, 'role-title-text', 'text'); + const titles = getAllMarksByGroupName(chart, 'role-title-text', 'text'); expect(titles.length).toBe(1); const title = titles[0]; expect(title).toHaveTextContent(Position.args.text); @@ -52,10 +53,10 @@ describe('Title', () => { test('FontWeight renders properly', async () => { render(<FontWeight {...FontWeight.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const titles = getAllMarksByGroupName(prism, 'role-title-text', 'text'); + const titles = getAllMarksByGroupName(chart, 'role-title-text', 'text'); expect(titles.length).toBe(1); const title = titles[0]; expect(title).toHaveTextContent(FontWeight.args.text); @@ -67,10 +68,10 @@ describe('Title', () => { test('Orient renders properly', async () => { render(<Orient {...Orient.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const titles = getAllMarksByGroupName(prism, 'role-title-text', 'text'); + const titles = getAllMarksByGroupName(chart, 'role-title-text', 'text'); expect(titles.length).toBe(1); const title = titles[0]; expect(title).toHaveTextContent(FontWeight.args.text); @@ -78,7 +79,7 @@ describe('Title', () => { // Baseline is top for bottom orient expect(title).toHaveAttribute('transform', 'translate(0,14)'); - const titleGroups = getAllMarksByGroupName(prism, 'role-title', 'g'); + const titleGroups = getAllMarksByGroupName(chart, 'role-title', 'g'); const positioningGroup = titleGroups[0]; expect(positioningGroup).toHaveAttribute('transform', 'translate(194,375)'); }); diff --git a/src/stories/components/Trendline/Trendline.story.tsx b/src/stories/components/Trendline/Trendline.story.tsx index a984189b5..525f5b3c1 100644 --- a/src/stories/components/Trendline/Trendline.story.tsx +++ b/src/stories/components/Trendline/Trendline.story.tsx @@ -12,14 +12,14 @@ import React, { ReactElement } from 'react'; import { TRENDLINE_VALUE } from '@constants'; -import usePrismProps from '@hooks/usePrismProps'; -import { Axis, ChartTooltip, Legend, Line, Prism, PrismProps, Trendline } from '@prism'; +import useChartProps from '@hooks/useChartProps'; +import { Axis, Chart, ChartProps, ChartTooltip, Legend, Line, Trendline } from '@rsc'; import { workspaceTrendsData } from '@stories/data/data'; import { ComponentStory } from '@storybook/react'; import { bindWithProps } from 'test-utils/bindWithProps'; export default { - title: 'Prism/Trendline', + title: 'RSC/Trendline', component: Trendline, argTypes: { method: { @@ -57,12 +57,12 @@ export default { }, }; -const defaultPrismProps: PrismProps = { data: workspaceTrendsData, minWidth: 400, maxWidth: 800, height: 400 }; +const defaultChartProps: ChartProps = { data: workspaceTrendsData, minWidth: 400, maxWidth: 800, height: 400 }; const TrendlineStory: ComponentStory<typeof Trendline> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" baseline ticks /> <Line color="series"> @@ -78,21 +78,21 @@ const TrendlineStory: ComponentStory<typeof Trendline> = (args): ReactElement => </Trendline> </Line> <Legend lineWidth={{ value: 0 }} highlight /> - </Prism> + </Chart> ); }; const TrendlineStoryWithoutTooltip: ComponentStory<typeof Trendline> = (args): ReactElement => { - const prismProps = usePrismProps(defaultPrismProps); + const chartProps = useChartProps(defaultChartProps); return ( - <Prism {...prismProps}> + <Chart {...chartProps}> <Axis position="left" grid title="Users" /> <Axis position="bottom" labelFormat="time" baseline ticks /> <Line color="series"> <Trendline {...args} /> </Line> <Legend lineWidth={{ value: 0 }} highlight /> - </Prism> + </Chart> ); }; diff --git a/src/stories/components/Trendline/Trendline.test.tsx b/src/stories/components/Trendline/Trendline.test.tsx index 7face184d..ed5a98844 100644 --- a/src/stories/components/Trendline/Trendline.test.tsx +++ b/src/stories/components/Trendline/Trendline.test.tsx @@ -12,8 +12,8 @@ import React from 'react'; import '@matchMediaMock'; -import { Trendline } from '@prism'; -import { findAllMarksByGroupName, findPrism, getAllLegendEntries, hoverNthElement, render } from '@test-utils'; +import { Trendline } from '@rsc'; +import { findAllMarksByGroupName, findChart, getAllLegendEntries, hoverNthElement, render } from '@test-utils'; import { Basic, DisplayOnHover } from './Trendline.story'; @@ -25,10 +25,10 @@ describe('Trendline', () => { test('Basic renders properly', async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const trendlines = await findAllMarksByGroupName(prism, 'line0Trendline0'); + const trendlines = await findAllMarksByGroupName(chart, 'line0Trendline0'); expect(trendlines).toHaveLength(4); expect(trendlines[0]).toHaveAttribute('stroke-dasharray', '7,4'); expect(trendlines[0]).toHaveAttribute('stroke-width', '1.5'); @@ -37,20 +37,20 @@ describe('Trendline', () => { describe('DisplayOnHover', () => { test('should display trendlines on line hover', async () => { render(<DisplayOnHover {...DisplayOnHover.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); - const lines = await findAllMarksByGroupName(prism, 'line0'); + const lines = await findAllMarksByGroupName(chart, 'line0'); expect(lines).toHaveLength(4); - const trendlines = await findAllMarksByGroupName(prism, 'line0Trendline0'); + const trendlines = await findAllMarksByGroupName(chart, 'line0Trendline0'); expect(trendlines).toHaveLength(4); // trendlines should be hidden by default expect(trendlines[0]).toHaveAttribute('stroke-opacity', '0'); // hover over the first point on the first line - const hoverAreas = await findAllMarksByGroupName(prism, 'line0_voronoi'); + const hoverAreas = await findAllMarksByGroupName(chart, 'line0_voronoi'); await hoverNthElement(hoverAreas, 0); // first trendline should be visible @@ -60,16 +60,16 @@ describe('Trendline', () => { }); test('should display trendlines on legend hover', async () => { render(<DisplayOnHover {...DisplayOnHover.args} />); - const prism = await findPrism(); + const chart = await findChart(); - const trendlines = await findAllMarksByGroupName(prism, 'line0Trendline0'); + const trendlines = await findAllMarksByGroupName(chart, 'line0Trendline0'); expect(trendlines).toHaveLength(4); // trendlines should be hidden by default expect(trendlines[0]).toHaveAttribute('stroke-opacity', '0'); // hover over the first point on the first line - const legendEntries = getAllLegendEntries(prism); + const legendEntries = getAllLegendEntries(chart); await hoverNthElement(legendEntries, 0); // first trendline should be visible diff --git a/src/test-utils/customQueries.ts b/src/test-utils/customQueries.ts index b3d0674aa..f9c3f3579 100644 --- a/src/test-utils/customQueries.ts +++ b/src/test-utils/customQueries.ts @@ -9,7 +9,6 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - import { buildQueries } from '@testing-library/react'; const queryAllMarksByGroupName = (container: HTMLElement, markName: string, tagName = 'path') => @@ -80,7 +79,7 @@ const getMissingAxisLabelError = () => `Unable to find any legend entries`; const [queryAxisLabels, getAllAxisLabels, getAxisLabels, findAllAxisLabels, findAxisLabels] = buildQueries( queryAllAxisLabels, getMultipleAxisLabelError, - getMissingAxisLabelError, + getMissingAxisLabelError ); export { queryAxisLabels, queryAllAxisLabels, getAxisLabels, getAllAxisLabels, findAllAxisLabels, findAxisLabels }; diff --git a/src/test-utils/utils.ts b/src/test-utils/utils.ts index c4fcd317e..557f09368 100644 --- a/src/test-utils/utils.ts +++ b/src/test-utils/utils.ts @@ -9,11 +9,10 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -export const findPrism = async () => { +export const findChart = async () => { return screen.findByRole('graphics-document'); }; diff --git a/src/themes/spectrumTheme.ts b/src/themes/spectrumTheme.ts index 27d8cea49..963e5f01f 100644 --- a/src/themes/spectrumTheme.ts +++ b/src/themes/spectrumTheme.ts @@ -9,22 +9,21 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - +import { DEFAULT_SYMBOL_SIZE, DEFAULT_SYMBOL_STROKE_WIDTH } from '@constants'; import { ROUNDED_SQUARE_PATH } from 'svgPaths'; import { ColorScheme } from 'types'; import { BaseLegendLayout, Config, mergeConfig } from 'vega'; -import spectrumColors from './spectrumColors.json'; -import { divergentOrangeYellowSeafoam15 } from './divergingColorPalette'; import { categorical16 } from './categoricalColorPalette'; +import { divergentOrangeYellowSeafoam15 } from './divergingColorPalette'; import { sequentialViridis16 } from './sequentialColorPalette'; -import { DEFAULT_SYMBOL_SIZE, DEFAULT_SYMBOL_STROKE_WIDTH } from '@constants'; +import spectrumColors from './spectrumColors.json'; export const ADOBE_CLEAN_FONT = "adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif"; const FONT_SIZE = 14; -export function getPrismConfig(config: Config | undefined, colorScheme: ColorScheme): Config { +export function getChartConfig(config: Config | undefined, colorScheme: ColorScheme): Config { const defaultConfig = getSpectrumVegaConfig(colorScheme); if (config) { return mergeConfig(defaultConfig, config); diff --git a/src/types/Prism.ts b/src/types/Chart.ts similarity index 96% rename from src/types/Prism.ts rename to src/types/Chart.ts index bda47bdcd..ebbba992d 100644 --- a/src/types/Prism.ts +++ b/src/types/Chart.ts @@ -18,7 +18,7 @@ import { Theme } from '@react-types/provider'; import { Colors, SpectrumColor } from './SpectrumVizColors'; -export type PrismElement = ReactElement<PrismProps, JSXElementConstructor<PrismProps>>; +export type ChartElement = ReactElement<ChartProps, JSXElementConstructor<ChartProps>>; export type AreaElement = ReactElement<AreaProps, JSXElementConstructor<AreaProps>>; export type AxisElement = ReactElement<AxisProps, JSXElementConstructor<AxisProps>>; export type AxisAnnotationElement = ReactElement<AxisAnnotationProps, JSXElementConstructor<AxisAnnotationProps>>; @@ -34,14 +34,14 @@ export type TrendlineElement = ReactElement<TrendlineProps, JSXElementConstructo export type MetricRangeElement = ReactElement<MetricRangeProps, JSXElementConstructor<MetricRangeProps>>; export type SimpleData = { [key: string]: unknown }; -export type PrismData = SimpleData | Data; +export type ChartData = SimpleData | Data; export interface SpecProps { // children is optional because it is a pain to make this required with how children get defined in stories - // we have a check at the beginning of Prism to make sure this isn't undefined + // we have a check at the beginning of Chart to make sure this isn't undefined // if it is undefined, we log an error and render a fragment - children?: Children<PrismChildElement>; - colors?: PrismColors; + children?: Children<RscElement>; + colors?: ChartColors; colorScheme?: ColorScheme; // spectrum color scheme description?: string; // chart description symbolShapes?: SymbolShapes; @@ -56,20 +56,20 @@ export interface SpecProps { export interface SanitizedSpecProps extends SpecProps { children: ChartChildElement[]; - data?: PrismData[]; + data?: ChartData[]; } export type Orientation = 'vertical' | 'horizontal'; -export type PrismColors = Colors | Colors[]; +export type ChartColors = Colors | Colors[]; export type LineTypes = LineType[] | LineType[][]; export type Opacities = number[] | number[][]; -export type SymbolShapes = PrismSymbolShape[] | PrismSymbolShape[][]; -export type PrismSymbolShape = 'rounded-square' | SymbolShape; +export type SymbolShapes = ChartSymbolShape[] | ChartSymbolShape[][]; +export type ChartSymbolShape = 'rounded-square' | SymbolShape; -export interface PrismProps extends SpecProps { +export interface ChartProps extends SpecProps { backgroundColor?: string; config?: Config; - data: PrismData[]; + data: ChartData[]; debug?: boolean; height?: number; maxWidth?: number; @@ -88,7 +88,7 @@ export interface BaseProps { export type Width = number | string | 'auto'; -export interface PrismHandle { +export interface ChartHandle { copy: () => Promise<string>; download: (customFileName?: string) => Promise<string>; } @@ -209,7 +209,7 @@ export type ColorFacet = FacetRef<string | SpectrumColor>; export type LineTypeFacet = FacetRef<LineType>; export type LineWidthFacet = FacetRef<LineWidth>; export type OpacityFacet = FacetRef<number>; -export type SymbolShapeFacet = FacetRef<PrismSymbolShape>; +export type SymbolShapeFacet = FacetRef<ChartSymbolShape>; export type DualFacet = [string, string]; // two keys used for a secondary facet on Bar charts @@ -449,4 +449,4 @@ export type MarkChildElement = | ChartPopoverElement | MetricRangeElement | TrendlineElement; -export type PrismChildElement = ChartChildElement | MarkChildElement; +export type RscElement = ChartChildElement | MarkChildElement; diff --git a/src/types/index.ts b/src/types/index.ts index a80c5568e..cf5057ea0 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -10,6 +10,6 @@ * governing permissions and limitations under the License. */ -export * from './Prism'; +export * from './Chart'; export * from './specBuilderTypes'; export * from './SpectrumVizColors'; diff --git a/src/types/specBuilderTypes.ts b/src/types/specBuilderTypes.ts index afd793665..9fcc7e2b8 100644 --- a/src/types/specBuilderTypes.ts +++ b/src/types/specBuilderTypes.ts @@ -25,7 +25,7 @@ import { MarkChildElement, MetricRangeProps, TrendlineProps, -} from './Prism'; +} from './Chart'; type PartiallyRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>; diff --git a/src/utils/markClickUtils.ts b/src/utils/markClickUtils.ts index 94cbfab9f..ea19bf1d0 100644 --- a/src/utils/markClickUtils.ts +++ b/src/utils/markClickUtils.ts @@ -19,24 +19,27 @@ export type ActionItem = Item | undefined | null; /** * Generates the callback for the mark click handler - * @param hiddenSeries - * @param setHiddenSeries * @param chartView + * @param hiddenSeries + * @param chartId * @param selectedData * @param selectedDataBounds - * @param prismId + * @param selectedDataName + * @param setHiddenSeries + * @param legendIsToggleable + * @param onLegendClick * @returns */ export const getOnMarkClickCallback = ( chartView: MutableRefObject<View | undefined>, hiddenSeries: string[], - prismId: MutableRefObject<string>, + chartId: MutableRefObject<string>, selectedData: MutableRefObject<Datum | null>, selectedDataBounds: MutableRefObject<MarkBounds | undefined>, selectedDataName: MutableRefObject<string | undefined>, setHiddenSeries: (hiddenSeries: string[]) => void, legendIsToggleable?: boolean, - onLegendClick?: (seriesName: string) => void, + onLegendClick?: (seriesName: string) => void ): ((event: ScenegraphEvent, item: ActionItem) => void) => { return (_event: ScenegraphEvent, item: ActionItem) => { if (!item) return; @@ -62,7 +65,7 @@ export const getOnMarkClickCallback = ( // we need to anchor the popover to a div that we move to the same location as the selected mark selectedDataBounds.current = getItemBounds(item); selectedDataName.current = getItemName(item); - (document.querySelector(`#${prismId.current} > button`) as HTMLButtonElement)?.click(); + (document.querySelector(`#${chartId.current} > button`) as HTMLButtonElement)?.click(); } }; }; @@ -75,7 +78,7 @@ export const getOnMarkClickCallback = ( */ export const handleLegendItemMouseInput = ( item: ActionItem, - onLegendMouseInput?: (seriesName: string) => void, + onLegendMouseInput?: (seriesName: string) => void ): void => { const legendItemValue = getLegendItemValue(item); if (legendItemValue) { @@ -90,7 +93,7 @@ export const handleLegendItemMouseInput = ( * @returns */ export const getOnMouseInputCallback = ( - onMouseInput?: (seriesName: string) => void, + onMouseInput?: (seriesName: string) => void ): ((event: ScenegraphEvent, item: ActionItem) => void) => { return (_event: ScenegraphEvent, item: ActionItem) => { if (!item) return; @@ -122,7 +125,7 @@ export const handleLegendItemClick = ( hiddenSeries: string[], setHiddenSeries: (hiddenSeries: string[]) => void, legendIsToggleable?: boolean, - onLegendClick?: (seriesName: string) => void, + onLegendClick?: (seriesName: string) => void ): void => { const legendItemValue = getLegendItemValue(item); if (legendItemValue === undefined) return; diff --git a/src/utils/utils.test.tsx b/src/utils/utils.test.tsx index a05b510ae..744c835eb 100644 --- a/src/utils/utils.test.tsx +++ b/src/utils/utils.test.tsx @@ -24,7 +24,7 @@ import { toCamelCase, toggleStringArrayValue, } from '@utils'; -import { Prism } from 'Prism'; +import { Chart } from 'Chart'; describe('utils', () => { describe('toCamelCase()', () => { @@ -80,7 +80,7 @@ describe('utils', () => { describe('getAllElements()', () => { test('should return all matches', () => { const element = ( - <Prism data={[]}> + <Chart data={[]}> <Bar> <Trendline> <ChartTooltip /> @@ -93,7 +93,7 @@ describe('utils', () => { <Line> <ChartTooltip /> </Line> - </Prism> + </Chart> ); const matches = getAllElements(element, ChartTooltip); diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 185ac4ada..085bfaf1e 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -19,6 +19,7 @@ import { AxisAnnotationChildElement, AxisChildElement, ChartChildElement, + ChartElement, ChartTooltipElement, ChildElement, Children, @@ -26,12 +27,11 @@ import { LegendElement, MarkChildElement, PopoverHandler, - PrismChildElement, - PrismElement, + RscElement, TooltipHandler, } from '../types'; -type MappedElement = { name: string; element: PrismElement | PrismChildElement }; +type MappedElement = { name: string; element: ChartElement | RscElement }; type ElementCounts = { area: number; axis: number; @@ -48,8 +48,8 @@ export function toArray<Child>(children: Child | Child[] | undefined): Child[] { return [children]; } -// removes all non-prism specific elements -export const sanitizeChartChildren = (children: Children<PrismChildElement> | undefined): ChartChildElement[] => { +// removes all non-chart specific elements +export const sanitizeChartChildren = (children: Children<RscElement> | undefined): ChartChildElement[] => { return toArray(children) .flat() .filter((child): child is ChartChildElement => isChartChildElement(child)); @@ -83,15 +83,15 @@ export const sanitizeTrendlineChildren = ( }; const isChartChildElement = (child: ChildElement<ChartChildElement> | undefined): child is ChartChildElement => { - return isPrismComponent(child); + return isRscComponent(child); }; const isMarkChildElement = <T extends MarkChildElement = MarkChildElement>( child: ChildElement<T> | undefined ): child is T => { - return isPrismComponent(child); + return isRscComponent(child); }; -const isPrismComponent = (child?: ChildElement<MarkChildElement> | ChildElement<ChartChildElement>): boolean => { +const isRscComponent = (child?: ChildElement<RscElement>): boolean => { return Boolean( child && typeof child !== 'string' && typeof child !== 'boolean' && 'type' in child && child.type !== Fragment ); @@ -126,11 +126,11 @@ export const toggleStringArrayValue = (target: string[], value: string): string[ return [...target, value]; }; -// traverses the prism children to find the first element instance of the proivded type +// traverses the children to find the first element instance of the proivded type export function getElement( element: - | PrismElement - | PrismChildElement + | ChartElement + | RscElement | TooltipHandler | PopoverHandler | LegendElement @@ -139,7 +139,7 @@ export function getElement( | ReactFragment | undefined, type: typeof Axis | typeof Legend | typeof Line | typeof Bar | typeof ChartTooltip | typeof ChartPopover -): PrismElement | PrismChildElement | undefined { +): ChartElement | RscElement | undefined { // if the element is undefined or 'type' doesn't exist on the element, stop searching if ( !element || @@ -166,14 +166,14 @@ export function getElement( return undefined; } -// /** -// * Traverses the prism child elements finding all elements of the provided type and get the correct name for the element it is associated with -// * @param element -// * @param type -// * @returns -// */ +/** + * Traverses the child elements finding all elements of the provided type and get the correct name for the element it is associated with + * @param element + * @param type + * @returns + */ export const getAllElements = ( - target: Children<PrismElement | PrismChildElement>, + target: Children<ChartElement | RscElement>, source: typeof Axis | typeof Legend | typeof Line | typeof Bar | typeof ChartTooltip | typeof ChartPopover, elements: MappedElement[] = [], name: string = '' @@ -203,7 +203,7 @@ export const getAllElements = ( return [...elements, ...desiredElements]; }; -const getElementName = (element: ChildElement<PrismChildElement>, elementCounts: ElementCounts) => { +const getElementName = (element: ChildElement<RscElement>, elementCounts: ElementCounts) => { if (typeof element !== 'object' || !('type' in element)) return ''; switch (element.type) { case Area: @@ -231,7 +231,7 @@ const getElementName = (element: ChildElement<PrismChildElement>, elementCounts: } }; -export const getComponentName = (element: ChildElement<PrismChildElement>, defaultName: string) => { +export const getComponentName = (element: ChildElement<RscElement>, defaultName: string) => { if (typeof element === 'object' && 'props' in element && 'name' in element.props && element.props.name) { return toCamelCase(element.props.name); } diff --git a/templates/story.hbs b/templates/story.hbs index 50353ec8b..e94950702 100644 --- a/templates/story.hbs +++ b/templates/story.hbs @@ -9,40 +9,34 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ +import React, { ReactElement } from "react"; -import { {{name}} } from "@prism"; +import useChartProps from '@hooks/useChartProps'; +import { {{name}}, Chart } from "@rsc"; import { ComponentStory } from "@storybook/react"; -import { bindWithProps } from 'test-utils/bindWithProps'; -import React, { ReactElement } from "react"; +import { bindWithProps } from '@test-utils'; export default { - title: "Prism/{{name}}", + title: "RSC/{{name}}", component: {{name}}, - argTypes: { - /*onClick: { - control: { - type: "object", - }, - },*/ - }, - parameters: { - docs: { - description: { - component: - "This is _markdown_ enabled description for {{name}} component doc page.", - }, - }, - }, }; const {{name}}Story: ComponentStory<typeof {{name}}> = (args): ReactElement => { - // Shared props may be passed here - return <{{name}} {...args} />; + // TODO: add data + const chartProps = useChartProps({ data: [], width: 600 }); + + // TODO: use {{name}} correctly + return ( + <Chart {...chartProps}> + <{{name}} {...args} />; + </Chart> + ) + }; +// TODO: add component props and additional stories here const Basic = bindWithProps({{name}}Story); - -// Story specific props are passed here Basic.args = {}; + export { Basic }; diff --git a/templates/test.hbs b/templates/test.hbs index 474798c85..0ab396010 100644 --- a/templates/test.hbs +++ b/templates/test.hbs @@ -1,11 +1,23 @@ +/* + * Copyright 2023 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ +import React from "react"; + import '@matchMediaMock'; -import { {{name}} } from '@prism'; +import { {{name}} } from '@rsc'; import { - findPrism, + findChart, render, screen, } from '@test-utils'; -import React from "react"; import { Basic } from "./{{name}}.story"; @@ -17,7 +29,9 @@ describe("{{name}}", () => { test("Basic renders properly", async () => { render(<Basic {...Basic.args} />); - const prism = await findPrism(); - expect(prism).toBeInTheDocument(); + const chart = await findChart(); + expect(chart).toBeInTheDocument(); + // TODO: add expect statements for the basic behavior of {{name}} here }); + // TODO: add tests for each variation of {{name}} here }); diff --git a/tsconfig.json b/tsconfig.json index 139c70ef7..fa9a961c0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,7 +25,7 @@ "@components/*": ["components/*"], "@hooks/*": ["hooks/*"], "@matchMediaMock": ["test-utils/__mocks__/matchMedia.mock"], - "@prism": ["index.ts"], + "@rsc": ["index.ts"], "@specBuilder/*": ["specBuilder/*"], "@stories/*": ["stories/*"], "@test-utils": ["test-utils"], From 3041f5fcb14ff8b0fbac0fa71833e2a8f393b357 Mon Sep 17 00:00:00 2001 From: Marshall Peterson <mpeterson@adobe.com> Date: Thu, 2 Nov 2023 13:39:13 -0600 Subject: [PATCH 2/2] fix: smells --- src/Chart.tsx | 4 ++-- src/hooks/useChartImperativeHandle.tsx | 20 +++++++++++++------- src/specBuilder/chartSpecBuilder.ts | 2 +- src/stories/Chart.test.tsx | 14 ++++++++++---- 4 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/Chart.tsx b/src/Chart.tsx index 02bdbc0bb..bc050f05e 100644 --- a/src/Chart.tsx +++ b/src/Chart.tsx @@ -189,7 +189,7 @@ export const Chart = forwardRef<ChartHandle, ChartProps>( selectedDataBounds.current, padding ); - const showPlaceholderContent = useMemo(() => Boolean(loading || !data.length), [loading, data]); + const showPlaceholderContent = useMemo(() => Boolean(loading ?? !data.length), [loading, data]); useEffect(() => { // if placeholder content is displayed, clear out the chartview so it can't be downloaded or copied to clipboard if (showPlaceholderContent) { @@ -364,7 +364,7 @@ const LegendTooltip: FC<LegendTooltipProps> = ({ value, descriptions, domain }) } return ( <div className="rsc-tooltip legend-tooltip" data-testid="rsc-tooltip"> - <div className="series">{description.title || series}</div> + <div className="series">{description.title ?? series}</div> <p className="series-description">{description.description}</p> </div> ); diff --git a/src/hooks/useChartImperativeHandle.tsx b/src/hooks/useChartImperativeHandle.tsx index 80f92d863..7a58873b4 100644 --- a/src/hooks/useChartImperativeHandle.tsx +++ b/src/hooks/useChartImperativeHandle.tsx @@ -29,23 +29,29 @@ export default function useChartImperativeHandle( const blob = await response.blob(); navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]).then( () => resolve('Chart copied to clipboard'), - () => reject('Error occurred while writing to clipboard, copy to clipboard failed') + () => + reject( + new Error( + 'Error occurred while writing to clipboard, copy to clipboard failed' + ) + ) ); } catch (error) { - reject('Error occurred while fetching image, copy to clipboard failed'); + reject(new Error('Error occurred while fetching image, copy to clipboard failed')); } }, - () => reject('Error occurred while converting image to URL, copy to clipboard failed') + () => + reject(new Error('Error occurred while converting image to URL, copy to clipboard failed')) ); } else { - reject("There isn't a chart to copy, copy to clipboard failed"); + reject(new Error("There isn't a chart to copy, copy to clipboard failed")); } }); }, download(customFileName?: string) { return new Promise<string>((resolve, reject) => { if (chartView.current) { - const filename = `${customFileName || title || 'chart_export'}.png`; + const filename = `${customFileName ?? title ?? 'chart_export'}.png`; chartView.current.toImageURL('png').then( (url) => { const link = document.createElement('a'); @@ -55,10 +61,10 @@ export default function useChartImperativeHandle( link.dispatchEvent(new MouseEvent('click')); resolve(`Chart downloaded as ${filename}`); }, - () => reject('Error occurred while converting image to URL, download failed') + () => reject(new Error('Error occurred while converting image to URL, download failed')) ); } else { - reject("There isn't a chart to download, download failed"); + reject(new Error("There isn't a chart to download, download failed")); } }); }, diff --git a/src/specBuilder/chartSpecBuilder.ts b/src/specBuilder/chartSpecBuilder.ts index 4f184cae6..708d1b91c 100644 --- a/src/specBuilder/chartSpecBuilder.ts +++ b/src/specBuilder/chartSpecBuilder.ts @@ -252,7 +252,7 @@ export const getLineWidthScale = (lineWidths: LineWidth[]): OrdinalScale => ({ }); export const getOpacityScale = (opacities?: Opacities): OrdinalScale | PointScale => { - if (opacities && opacities.length) { + if (opacities?.length) { const range = isNumberArray(opacities) ? opacities : opacities.map((opacityArray) => opacityArray[0]); return { name: 'opacity', diff --git a/src/stories/Chart.test.tsx b/src/stories/Chart.test.tsx index c181df7c3..66a9c14ce 100644 --- a/src/stories/Chart.test.tsx +++ b/src/stories/Chart.test.tsx @@ -158,12 +158,16 @@ describe('Chart', () => { ); if (ref.current) { // should reject since the chart isn't done rendering - await expect(ref.current.copy()).rejects.toBe("There isn't a chart to copy, copy to clipboard failed"); - await expect(ref.current.download()).rejects.toBe("There isn't a chart to download, download failed"); + await expect(ref.current.copy()).rejects.toThrowError( + "There isn't a chart to copy, copy to clipboard failed" + ); + await expect(ref.current.download()).rejects.toThrowError( + "There isn't a chart to download, download failed" + ); const chart = await findChart(); expect(chart).toBeInTheDocument(); // should reject because fetch isn't mocked - await expect(ref.current.copy()).rejects.toBe( + await expect(ref.current.copy()).rejects.toThrowError( 'Error occurred while fetching image, copy to clipboard failed' ); // should resolve @@ -179,7 +183,9 @@ describe('Chart', () => { ); if (ref.current) { // should reject since the chart isn't done rendering - await expect(ref.current.download()).rejects.toBe("There isn't a chart to download, download failed"); + await expect(ref.current.download()).rejects.toThrowError( + "There isn't a chart to download, download failed" + ); const chart = await findChart(); expect(chart).toBeInTheDocument(); // should resolve