-
{description.title || series}
+
+
{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 70%
rename from src/hooks/usePrismImperativeHandle.tsx
rename to src/hooks/useChartImperativeHandle.tsx
index 73c64ae63..7a58873b4 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, () => ({
@@ -29,23 +29,29 @@ export default function usePrismImperativeHandle(
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((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 usePrismImperativeHandle(
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/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 90%
rename from src/specBuilder/prismSpecBuilder.ts
rename to src/specBuilder/chartSpecBuilder.ts
index b8c0104d7..708d1b91c 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',
@@ -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',
@@ -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 76%
rename from src/stories/Prism.test.tsx
rename to src/stories/Chart.test.tsx
index 3ce835d37..66a9c14ce 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 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();
+ 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
@@ -171,17 +175,19 @@ 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();
+ 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
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 (
-
+
= (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 */}
-
+
+
);
};
-const ReleaseImpactBarStory: ComponentStory = (args): ReactElement => {
+const ReleaseImpactBarStory: ComponentStory = (args): ReactElement => {
const [highlightedSeries, setHighlightedSeries]: [string, Dispatch>] = useState('');
const [hiddenSeries, setHiddenSeries]: [string[] | undefined, Dispatch>] =
useState();
@@ -379,25 +379,25 @@ const ReleaseImpactBarStory: ComponentStory = (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 = (args): ReactElement
{displayThirdSeries && getReleaseImpactBar(thirdSeriesKey, thirdSeriesProps, isSingleSeries)}
{/* Legend */}
-
+
+
);
};
-const TrendsTimeComparisonLineStory: ComponentStory = (args): ReactElement => {
- const props = usePrismProps(args);
+const TrendsTimeComparisonLineStory: ComponentStory = (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 = (args): Reac
{ seriesName: 'add-line-viz-1 | Last 4 weeks', label: 'Add Line Viz | Last 4 weeks' },
];
return (
-
+
+
);
};
-const TrendsTimeComparisonBarStory: ComponentStory = (args): ReactElement => {
- const props = usePrismProps(args);
+const TrendsTimeComparisonBarStory: ComponentStory = (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 = (args): React
{ seriesName: 'add-line-viz-1 | Last 4 weeks', label: 'Add Line Viz | Last 4 weeks' },
];
return (
-
+
= (args): React
paddingRatio={0.2}
/>
+
);
};
-const TrendsTimeComparisonStackedBarStory: ComponentStory = (args): ReactElement => {
- const props = usePrismProps(args);
+const TrendsTimeComparisonStackedBarStory: ComponentStory = (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 = (args)
{ seriesName: 'add-line-viz-1 | Last 4 weeks', label: 'Add Line Viz | Last 4 weeks' },
];
return (
-
+
= (args)
paddingRatio={0.2}
/>
+
);
};
-const StackOverflowStory: ComponentStory = (args): ReactElement => {
- const props = usePrismProps(args);
+const StackOverflowStory: ComponentStory = (args): ReactElement => {
+ const props = useChartProps(args);
return (
-
+
+
);
};
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((null);
- const props = usePrismProps({ data });
+ const ref = useRef(null);
+ const props = useChartProps({ data });
return (
-
+
+
ref?.current?.[variant]().then(console.log, console.warn)}
@@ -57,11 +58,11 @@ const HandleStory = ({ variant }: { variant: 'copy' | 'download' }) => {
);
};
-const CopyStory: ComponentStory = (): ReactElement => {
+const CopyStory: ComponentStory = (): ReactElement => {
return = (): ReactElement => {
+const DownloadStory: ComponentStory = (): ReactElement => {
return = (args): ReactElement => {
- const prismProps = usePrismProps(args);
- return = (args): ReactElement => {
+ const chartProps = useChartProps(args);
+ return = (args): ReactElement => {
- const prismProps = usePrismProps({ data: data, width: 600, height: 600 });
+ const chartProps = useChartProps({ data: data, width: 600, height: 600 });
return (
-
+
-
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps({ ...defaultPrismProps });
+ const chartProps = useChartProps({ ...defaultChartProps });
return (
-
+
+
);
};
const AreaTimeStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ ...defaultPrismProps });
+ const chartProps = useChartProps({ ...defaultChartProps });
return (
-
+
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
+
);
};
@@ -75,35 +75,35 @@ const timeData = [
];
const AreaTimeStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ ...defaultPrismProps, data: timeData });
+ const chartProps = useChartProps({ ...defaultChartProps, data: timeData });
return (
-
+
+
);
};
const TooltipStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
{dialog}
+
);
};
const PopoverStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
= (args): ReactElement => {
{dialog}
+
);
};
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 = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 600 });
+ const chartProps = useChartProps({ data, width: 600 });
return (
-
+
+
);
};
const TimeAxisStory: ComponentStory = (args): ReactElement => {
return (
-
+
+
);
};
const SubLabelStory: ComponentStory = (args): ReactElement => {
return (
-
+
+
);
};
const LinearAxisStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data: workspaceTrendsData, width: 600 });
+ const chartProps = useChartProps({ data: workspaceTrendsData, width: 600 });
return (
-
+
+
);
};
const NonLinearAxisStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data: workspaceTrendsData, width: 600 });
+ const chartProps = useChartProps({ data: workspaceTrendsData, width: 600 });
return (
-
+
+
);
};
const SparkLineStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data: stockPriceData, width: 200, height: 100 });
+ const chartProps = useChartProps({ data: stockPriceData, width: 200, height: 100 });
return (
-
+
@@ -104,7 +104,7 @@ const SparkLineStory: ComponentStory = (args): ReactElement => {
)}
-
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 600 });
+ const chartProps = useChartProps({ data, width: 600 });
return (
-
+
-
+
);
};
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(
);
-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 = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismLineProps);
+ const chartProps = useChartProps(defaultChartLineProps);
return (
-
+
+
);
};
const LegendAxisAnnotationStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismLineProps);
+ const chartProps = useChartProps(defaultChartLineProps);
return (
-
+
+
);
};
const PopoverAxisAnnotationStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismLineProps);
+ const chartProps = useChartProps(defaultChartLineProps);
return (
-
+
@@ -106,7 +106,7 @@ const PopoverAxisAnnotationStory: ComponentStory = (args)
{(datum) => Series: {datum.series} }
-
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps({ data: barData, width: 600, height: 600 });
+ const chartProps = useChartProps({ data: barData, width: 600, height: 600 });
return (
-
+
+
);
};
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( = (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 (
-
+
+
);
};
@@ -64,9 +64,9 @@ const dialogContent = (datum) => (
);
const DodgedBarPopoverStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data: barSeriesData, width: 800, height: 600 });
+ const chartProps = useChartProps({ data: barSeriesData, width: 800, height: 600 });
return (
-
+
@@ -74,19 +74,19 @@ const DodgedBarPopoverStory: ComponentStory = (args): ReactElement =
{dialogContent}
+
);
};
const DodgedBarLineTypeStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data: barSeriesData, width: 800, height: 600 });
+ const chartProps = useChartProps({ data: barSeriesData, width: 800, height: 600 });
return (
-
+
+
);
};
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 = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 600 });
+ const chartProps = useChartProps({ data, width: 600 });
return (
-
+
+
);
};
const ReferenceLineHorizontalStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 600 });
+ const chartProps = useChartProps({ data, width: 600 });
return (
-
+
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps({ data: barSeriesData, colors, width: 800, height: 600 });
+ const chartProps = useChartProps({ data: barSeriesData, colors, width: 800, height: 600 });
return (
-
+
+
);
};
const NegativeBarStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data: negativeBarSeriesData, width: 800, height: 600 });
+ const chartProps = useChartProps({ data: negativeBarSeriesData, width: 800, height: 600 });
return (
-
+
+
);
};
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 = (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 = (args: BarProps): ReactElement => {
};
return (
-
+
@@ -79,7 +79,7 @@ const BarStory: ComponentStory = (args: BarProps): ReactElement => {
{dialog}
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps({ data, renderer: 'canvas', width: 600 });
+ const chartProps = useChartProps({ data, renderer: 'canvas', width: 600 });
return (
-
+
{dialogContent}
-
+
);
};
const ChartPopoverSvgStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
{dialogContent}
-
+
);
};
const ChartPopoverDodgedBarStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
{dialogContent}
-
+
);
};
const LineStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
@@ -95,14 +96,14 @@ const LineStory: ComponentStory = (args): ReactElement => {
+
);
};
const AreaStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
= (args): ReactElement => {
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 600 });
+ const chartProps = useChartProps({ data, width: 600 });
return (
-
+
-
+
);
};
const DodgedBarTooltipStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 600 });
+ const chartProps = useChartProps({ data, width: 600 });
return (
-
+
-
+
);
};
@@ -78,13 +78,13 @@ const lineData = [
];
const LineTooltipStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data: lineData, width: 600 });
+ const chartProps = useChartProps({ data: lineData, width: 600 });
return (
-
+
-
+
);
};
@@ -98,13 +98,13 @@ interface LineData extends Datum {
}
const AreaTooltipStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data: lineData, width: 600 });
+ const chartProps = useChartProps({ data: lineData, width: 600 });
return (
-
+
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 700 });
+ const chartProps = useChartProps({ data, width: 700 });
return (
-
+
+
);
};
export const LegendBarHighlightedSeriesStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 700, highlightedSeries: 'Mac' });
+ const chartProps = useChartProps({ data, width: 700, highlightedSeries: 'Mac' });
return (
-
+
+
);
};
export const LegendBarHiddenSeriesStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 700, hiddenSeries: ['Mac'] });
+ const chartProps = useChartProps({ data, width: 700, hiddenSeries: ['Mac'] });
return (
-
+
+
);
};
export const LegendDisconnectedStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 700, height: 50 });
+ const chartProps = useChartProps({ data, width: 700, height: 50 });
return (
-
+
+
);
};
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 = (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 (
-
+
+
);
};
const LegendLineStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ data, width: 700 });
+ const chartProps = useChartProps({ data, width: 700 });
return (
-
+
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
+
);
};
const LinearStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
+
);
};
const LineStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
+
);
};
const ComboStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
+
);
};
const HistoricalCompareStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({
- ...defaultPrismProps,
+ const chartProps = useChartProps({
+ ...defaultChartProps,
data: historicalCompareData,
width: 600,
opacities: [0.5, 1],
lineTypes: ['dotted', 'solid'],
});
return (
-
+
+
);
};
const LineWithVisiblePointsStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({ ...defaultPrismProps, data: workspaceTrendsDataWithVisiblePoints });
+ const chartProps = useChartProps({ ...defaultChartProps, data: workspaceTrendsDataWithVisiblePoints });
return (
-
+
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
+
);
};
const MetricRangeWithStaticPointsStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
+
);
};
const MetricRangeWithPopoverStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
@@ -79,24 +79,24 @@ const MetricRangeWithPopoverStory: ComponentStory = (args):
{dialogContent}
+
);
};
const MetricRangeWithScaledAxisStory: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps({
- ...defaultPrismProps,
+ const chartProps = useChartProps({
+ ...defaultChartProps,
data: workspaceTrendsDataWithExtremeMetricRange,
});
return (
-
+
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
+
);
};
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( = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
@@ -78,21 +78,21 @@ const TrendlineStory: ComponentStory = (args): ReactElement =>
+
);
};
const TrendlineStoryWithoutTooltip: ComponentStory = (args): ReactElement => {
- const prismProps = usePrismProps(defaultPrismProps);
+ const chartProps = useChartProps(defaultChartProps);
return (
-
+
+
);
};
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(>;
+export type ChartElement = ReactElement>;
export type AreaElement = ReactElement>;
export type AxisElement = ReactElement>;
export type AxisAnnotationElement = ReactElement>;
@@ -34,14 +34,14 @@ export type TrendlineElement = ReactElement>;
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;
- colors?: PrismColors;
+ children?: Children;
+ 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;
download: (customFileName?: string) => Promise;
}
@@ -209,7 +209,7 @@ export type ColorFacet = FacetRef;
export type LineTypeFacet = FacetRef;
export type LineWidthFacet = FacetRef;
export type OpacityFacet = FacetRef;
-export type SymbolShapeFacet = FacetRef;
+export type SymbolShapeFacet = FacetRef;
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 = Omit & Required>;
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,
hiddenSeries: string[],
- prismId: MutableRefObject,
+ chartId: MutableRefObject,
selectedData: MutableRefObject,
selectedDataBounds: MutableRefObject,
selectedDataName: MutableRefObject,
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 = (
-
+
-
+
);
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(children: Child | Child[] | undefined): Child[] {
return [children];
}
-// removes all non-prism specific elements
-export const sanitizeChartChildren = (children: Children | undefined): ChartChildElement[] => {
+// removes all non-chart specific elements
+export const sanitizeChartChildren = (children: Children | undefined): ChartChildElement[] => {
return toArray(children)
.flat()
.filter((child): child is ChartChildElement => isChartChildElement(child));
@@ -83,15 +83,15 @@ export const sanitizeTrendlineChildren = (
};
const isChartChildElement = (child: ChildElement | undefined): child is ChartChildElement => {
- return isPrismComponent(child);
+ return isRscComponent(child);
};
const isMarkChildElement = (
child: ChildElement | undefined
): child is T => {
- return isPrismComponent(child);
+ return isRscComponent(child);
};
-const isPrismComponent = (child?: ChildElement | ChildElement): boolean => {
+const isRscComponent = (child?: ChildElement): 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,
+ target: Children,
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, elementCounts: ElementCounts) => {
+const getElementName = (element: ChildElement, elementCounts: ElementCounts) => {
if (typeof element !== 'object' || !('type' in element)) return '';
switch (element.type) {
case Area:
@@ -231,7 +231,7 @@ const getElementName = (element: ChildElement, elementCounts:
}
};
-export const getComponentName = (element: ChildElement, defaultName: string) => {
+export const getComponentName = (element: ChildElement, 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 = (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 (
+
+ <{{name}} {...args} />;
+
+ )
+
};
+// 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(