Create FacetedBarplot component

Author: chowington

src/plots/FacetedPlot.tsx

@@ -11,8 +11,18 @@ import React, {
 import { memoize } from 'lodash';
 
 import { FacetedData, FacetedPlotRef, PlotRef } from '../types/plots';
+import FacetedBarplot from './facetedPlots/FacetedBarplot';
+import Barplot from './Barplot';
 import { PlotProps } from './PlotlyPlot';
 
+const mapStringToPlotComponent = (str: string) =>
+  ({
+    Barplot: {
+      faceted: FacetedBarplot,
+      unfaceted: Barplot,
+    },
+  }[str]);
+
 type ComponentWithPlotRef<P> = ComponentType<
   PropsWithoutRef<P> & RefAttributes<PlotRef>
 >;

src/plots/facetedPlots/FacetedBarplot.tsx

@@ -0,0 +1,30 @@
+import Barplot, { BarplotProps } from '../Barplot';
+
+const facetedPlotContainerStyles = {
+  height: 300,
+  width: 375,
+  marginLeft: '0.75rem',
+  border: '1px solid #dedede',
+  boxShadow: '1px 1px 4px #00000066',
+};
+
+const facetedPlotSpacingOptions = {
+  marginRight: 10,
+  marginLeft: 10,
+  marginBotton: 10,
+  marginTop: 50,
+};
+
+const FacetedBarplot = ({
+  containerStyles = facetedPlotContainerStyles,
+  spacingOptions = facetedPlotSpacingOptions,
+  ...restProps
+}: BarplotProps) => (
+  <Barplot
+    containerStyles={containerStyles}
+    spacingOptions={spacingOptions}
+    {...restProps}
+  />
+);
+
+export default FacetedBarplot;