@redsift/charts 8.0.0 → 8.0.1

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { composeStory } from '@storybook/react';
+import Meta, { Controls, themes } from './ScatterPlot.stories';
+
+import { ScatterPlotLabelVariant, ScatterPlotVariant } from './types';
+import { ChartSize, ChartTheme, TooltipVariant } from '../../types';
+
+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,98 @@
+import React, { forwardRef, useId } from 'react';
+import classNames from 'classnames';
+
+import { Comp } 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> = {
+  labelVariant: ScatterPlotLabelVariant.externalLabel,
+  localeText: {
+    emptyChartText: 'No Data',
+  },
+  size: ChartSize.medium,
+  theme: ColorTheme.default,
+  tooltipVariant: TooltipVariant.none,
+  variant: ScatterPlotVariant.default,
+  xAxisVariant: AxisVariant.default,
+  yAxisVariant: AxisVariant.default,
+};
+
+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 = propsId ?? useId();
+
+    // console.log(propsData);
+
+    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;