Merge branch 'individual-facetedplot-components' into faceting-#259

Author: chowington

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veupathdb/components",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "license": "Apache-2.0",
   "description": "React Components for VEuPathDB Websites",
   "repository": {

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;

src/types/plots/xyplot.ts

@@ -33,6 +33,8 @@ export type XYPlotDataSeries = {
   fill?: 'tozerox' | 'tozeroy' | 'toself';
   /** filling plots: color */
   fillcolor?: string;
+  /** R-square value for Best fit option */
+  r2?: number;
 };
 
 export type XYPlotData = {