Fix Ordinal foregroungGraphics rendering

Author: emeeks

src/components/OrdinalFrame.js

@@ -1640,6 +1640,11 @@ class OrdinalFrame extends React.Component<OrdinalFrameProps, State> {
       }
     }
 
+    const renderedForegroundGraphics =
+      typeof foregroundGraphics === "function"
+        ? foregroundGraphics({ size, margin })
+        : foregroundGraphics
+
     return (
       <Frame
         name="ordinalframe"
@@ -1682,7 +1687,7 @@ class OrdinalFrame extends React.Component<OrdinalFrameProps, State> {
         margin={margin}
         columns={projectedColumns}
         backgroundGraphics={backgroundGraphics}
-        foregroundGraphics={[foregroundGraphics, oLabels]}
+        foregroundGraphics={[renderedForegroundGraphics, oLabels]}
         beforeElements={beforeElements}
         afterElements={afterElements}
         downloadButton={downloadButton}

src/docs/components/CanvasInteractionRaw.js

@@ -29,7 +29,6 @@ export default class DecisionMatrixExample extends React.Component {
     fetch(`${ROOT}/sampledata/diamonds.csv`)
       .then(response => response.text())
       .then(data => {
-        // console.log(data)
         const parsedDiamonds = []
         csvParse(data).forEach(d => {
           parsedDiamonds.push({

src/docs/components/CreatingBarChart.js

@@ -177,6 +177,33 @@ export default class CreatingBarChart extends React.Component {
             axis={{ orient: "left", label: "Favorites + Retweets" }}
             margin={{ left: 70, bottom: 50, right: 5, top: 55 }}
             oPadding={15}
+            backgroundGraphics={({ size, margin }) => (
+              <g>
+                <rect
+                  fill="#fffceb"
+                  stroke="#f8ffeb"
+                  width={size[0] - margin.right - margin.left}
+                  height={size[1] - margin.top - margin.bottom}
+                  x={margin.left}
+                  y={margin.top}
+                  strokeWidth={1}
+                />
+                <text>{JSON.stringify(margin)}</text>
+              </g>
+            )}
+            foregroundGraphics={({ size, margin }) => (
+              <g>
+                <line
+                  strokeWidth={3}
+                  stroke={"#fcebff"}
+                  x1={margin.left}
+                  x2={size[0] - margin.right}
+                  y1={size[1] - margin.bottom}
+                  y2={size[1] - margin.bottom}
+                />
+              </g>
+            )}
+          />
           />
         </div>
       ),

src/docs/components/CreatingLineChart.js

@@ -489,6 +489,31 @@ export default class CreatingLineChart extends React.Component {
             customDoubleClickBehavior={d =>
               console.info("customDoubleClickBehavior d", d)
             }
+            backgroundGraphics={({ size, margin }) => (
+              <g>
+                <rect
+                  fill="#fffceb"
+                  stroke="#f8ffeb"
+                  width={size[0] - margin.right}
+                  height={size[1] - margin.top - margin.bottom}
+                  x={margin.left}
+                  y={margin.top}
+                />
+                <text>{JSON.stringify(margin)}</text>
+              </g>
+            )}
+            foregroundGraphics={({ size, margin }) => (
+              <g>
+                <line
+                  strokeWidth={3}
+                  stroke={"#fcebff"}
+                  x1={margin.left}
+                  x2={size[0] - margin.right}
+                  y1={size[1] - margin.bottom}
+                  y2={size[1] - margin.bottom}
+                />
+              </g>
+            )}
           />
           <h3>Flat Data</h3>
           <ResponsiveXYFrame