@redsift/charts 9.2.3-patch → 9.2.3

package/src/components/ScatterPlot/ScatterPlot.stories.tsx

@@ -0,0 +1,101 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import mock from '../../../../../.storybook/static/mocks/bakery-trimmed.json';
+
+import { PresentationColorPalette } from '@redsift/design-system';
+import { ScatterPlot } from '.';
+import { ScatterPlotLabelVariant, ScatterPlotVariant } from './types';
+import { ChartSize, ColorTheme, CoordinatesCategoryData, CoordinatesCategoryDim, TooltipVariant } from '../../types';
+import { AxisVariant } from '../Axis';
+
+const themes = {
+  ...ColorTheme,
+  'success-warning-danger': {
+    success: 'Bread',
+    warning: 'Tea',
+    danger: 'Coffee',
+  },
+  'success-warning-danger-neutral': {
+    success: 'Bread',
+    warning: 'Tea',
+    danger: 'Coffee',
+    neutral: 'Pastry',
+  },
+  custom: {
+    Coffee: PresentationColorPalette.purple,
+    Bread: PresentationColorPalette.pink,
+    Tea: PresentationColorPalette.aqua,
+  },
+};
+
+const meta: Meta<typeof ScatterPlot> = {
+  title: 'Charts/ScatterPlot',
+  component: ScatterPlot as any,
+  argTypes: {
+    variant: {
+      options: Object.values(ScatterPlotVariant),
+      control: { type: 'select' },
+    },
+    labelVariant: {
+      options: Object.values(ScatterPlotLabelVariant),
+      control: { type: 'select' },
+    },
+    tooltipVariant: {
+      options: Object.values(TooltipVariant),
+      control: { type: 'select' },
+    },
+    size: {
+      options: Object.values(ChartSize),
+      control: { type: 'select' },
+    },
+    theme: {
+      options: Object.keys(themes),
+      mapping: themes,
+      control: {
+        type: 'select',
+      },
+    },
+    xAxisVariant: {
+      options: Object.values(AxisVariant),
+      control: { type: 'select' },
+    },
+    yAxisVariant: {
+      options: Object.values(AxisVariant),
+      control: { type: 'select' },
+    },
+    xAxisPlacement: {
+      options: ['bottom', 'top', 'both'],
+      control: { type: 'select' },
+    },
+    yAxisPlacement: {
+      options: ['left', 'right', 'both'],
+      control: { type: 'select' },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof ScatterPlot>;
+
+const data: CoordinatesCategoryData = mock.map((d) => ({
+  key: [+d.x!, +d.y!, d.Items] as CoordinatesCategoryDim,
+  value: 1,
+}));
+
+export const Controls: Story = {
+  args: {
+    title: 'Scatter Plot',
+    variant: 'gridded',
+    labelVariant: 'externalLabelValue',
+    tooltipVariant: 'value',
+    size: 'large',
+    theme: 'default',
+    isBrushable: true,
+    xAxisVariant: 'default',
+    yAxisVariant: 'default',
+    xAxisPlacement: 'bottom',
+    yAxisPlacement: 'left',
+    caption:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet odio eu ex ornare sagittis egestas non massa.',
+    data: data,
+  },
+};

package/src/components/ScatterPlot/ScatterPlot.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { composeStory } from '@storybook/react';
+import Meta, { Controls } from './ScatterPlot.stories';
+
+import { ScatterPlotLabelVariant, ScatterPlotVariant } from './types';
+import { ChartSize, ChartTheme, ColorTheme, TooltipVariant } from '../../types';
+import { PresentationColorPalette } from '@redsift/design-system';
+
+const themes = {
+  ...ColorTheme,
+  'success-warning-danger': {
+    success: 'Bread',
+    warning: 'Tea',
+    danger: 'Coffee',
+  },
+  'success-warning-danger-neutral': {
+    success: 'Bread',
+    warning: 'Tea',
+    danger: 'Coffee',
+    neutral: 'Pastry',
+  },
+  custom: {
+    Coffee: PresentationColorPalette.purple,
+    Bread: PresentationColorPalette.pink,
+    Tea: PresentationColorPalette.aqua,
+  },
+};
+
+describe('ScatterPlot', () => {
+  it('should match snapshot', () => {
+    const ComposedStory = composeStory(Controls, Meta);
+    const tree = render(
+      <>
+        {Object.values(ScatterPlotVariant).map((variant, i) =>
+          Object.values(ChartSize).map((size, j) =>
+            Object.values(ScatterPlotLabelVariant).map((labelVariant, k) => (
+              <ComposedStory
+                key={`${variant}-${size}-${labelVariant}-${Object.values(TooltipVariant)[k]}`}
+                variant={variant}
+                labelVariant={labelVariant}
+                tooltipVariant={Object.values(TooltipVariant)[k]}
+                size={size}
+                theme={
+                  Object.keys(themes)[
+                    (i * Object.values(ChartSize).length + j * Object.values(ScatterPlotLabelVariant).length + k) %
+                      Object.keys(themes).length
+                  ] as ChartTheme
+                }
+                xAxisVariant="default"
+                yAxisVariant="default"
+              />
+            ))
+          )
+        )}
+      </>
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/ScatterPlot/ScatterPlot.tsx

@@ -0,0 +1,94 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+
+import { Comp, useId } from '@redsift/design-system';
+
+import { ChartSize, ColorTheme, TooltipVariant } from '../../types';
+import { ScatterPlotLabelVariant, ScatterPlotProps, ScatterPlotVariant } from './types';
+import { LoadingScatterPlot } from './LoadingScatterPlot';
+import { EmptyScatterPlot } from './EmptyScatterPlot';
+import { RenderedScatterPlot } from './RenderedScatterPlot';
+import { AxisVariant } from '../Axis';
+
+const COMPONENT_NAME = 'ScatterPlot';
+const CLASSNAME = 'redsift-scatterplot';
+const DEFAULT_PROPS: Partial<ScatterPlotProps> = {
+  hideControlKeyPanel: false,
+  labelVariant: ScatterPlotLabelVariant.externalLabel,
+  localeText: {
+    emptyChartText: 'No Data',
+  },
+  size: ChartSize.medium,
+  theme: ColorTheme.default,
+  tooltipVariant: TooltipVariant.none,
+  variant: ScatterPlotVariant.default,
+  xAxisVariant: AxisVariant.default,
+  xAxisPlacement: 'bottom',
+  yAxisVariant: AxisVariant.default,
+  yAxisPlacement: 'left',
+};
+
+export const ScatterPlot: Comp<ScatterPlotProps, HTMLDivElement> = forwardRef((props, ref) => {
+  const {
+    className,
+    data: propsData,
+    dotRole,
+    emptyComponent,
+    id: propsId,
+    isDotSelected,
+    labelVariant,
+    localeText,
+    onBrush,
+    onBrushEnd,
+    onDotClick,
+    size,
+    theme,
+    tooltipVariant,
+    variant,
+
+    ...forwardedProps
+  } = props;
+  const [_id] = useId();
+  const id = propsId ?? _id;
+
+  if (propsData === undefined || propsData === null) {
+    return <LoadingScatterPlot id={id} {...forwardedProps} ref={ref} />;
+  }
+
+  if (propsData.length === 0) {
+    return (
+      <EmptyScatterPlot
+        data={propsData}
+        emptyComponent={emptyComponent}
+        localeText={localeText}
+        size={size}
+        {...forwardedProps}
+        ref={ref}
+      />
+    );
+  }
+
+  return (
+    <RenderedScatterPlot
+      className={classNames(ScatterPlot.className, className)}
+      data={propsData}
+      dotRole={dotRole}
+      id={id}
+      isDotSelected={isDotSelected}
+      labelVariant={labelVariant}
+      localeText={localeText}
+      onBrush={onBrush}
+      onBrushEnd={onBrushEnd}
+      onDotClick={onDotClick}
+      size={size}
+      theme={theme}
+      tooltipVariant={tooltipVariant}
+      variant={variant}
+      {...forwardedProps}
+      ref={ref}
+    />
+  );
+});
+ScatterPlot.className = CLASSNAME;
+ScatterPlot.defaultProps = DEFAULT_PROPS;
+ScatterPlot.displayName = COMPONENT_NAME;