Adds background property to the style prop for VictoryChartProps inte…

…rface
FormidableLabs · May 7, 2020 · dbbb9c6 · dbbb9c6
1 parent 8e49600
commit dbbb9c6
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 20 deletions.
diff --git a/demo/ts/components/victory-chart-demo.tsx b/demo/ts/components/victory-chart-demo.tsx
@@ -208,13 +208,18 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
       alignItems: "center",
       justifyContent: "center"
     };
-    const chartStyle = { parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" } };
-    const axisStyle = {
+
+    const chartStyle: { [key: string]: React.CSSProperties } = {
+      parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }
+    };
+
+    const axisStyle: { [key: string]: React.CSSProperties } = {
       grid: { stroke: "grey", strokeWidth: 1 },
       axis: { stroke: "transparent" },
       ticks: { stroke: "transparent" },
       tickLabels: { fill: "none" }
     };
+
     return (
       <div className="demo">
         <h1>VictoryChart</h1>

diff --git a/demo/ts/components/victory-polar-axis-demo.tsx b/demo/ts/components/victory-polar-axis-demo.tsx
@@ -10,7 +10,7 @@ import { VictoryScatter } from "@packages/victory-scatter";
 import { VictoryZoomContainer } from "@packages/victory-zoom-container";
 import { VictoryVoronoiContainer } from "@packages/victory-voronoi-container";
 import { random, range, keys } from "lodash";
-import { VictoryTheme, VictoryLabel, VictoryStyleInterface } from "@packages/victory-core";
+import { VictoryTheme, VictoryLabel } from "@packages/victory-core";
 
 type multiAxisDataListType = {
   strength?: number;
@@ -115,7 +115,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
       justifyContent: "center"
     };
 
-    const chartStyle: VictoryStyleInterface = {
+    const chartStyle: { [key: string]: React.CSSProperties } = {
       parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }
     };
 

diff --git a/packages/victory-chart/src/index.d.ts b/packages/victory-chart/src/index.d.ts
@@ -1,32 +1,32 @@
 import * as React from "react";
 import {
   CategoryPropType,
-  EventPropTypeInterface,
   DomainPropType,
-  DomainPaddingPropType,
+  EventPropTypeInterface,
   StringOrNumberOrCallback,
   VictoryCommonProps,
-  VictoryStyleInterface
+  VictoryStyleInterface,
+  VictoryStyleObject
 } from "victory-core";
 
 export type AxesType = {
-  independent?: React.ReactElement;
   dependent?: React.ReactElement;
+  independent?: React.ReactElement;
 };
 
 export interface VictoryChartProps extends VictoryCommonProps {
-  defaultAxes?: AxesType;
-  defaultPolarAxes?: AxesType;
   categories?: CategoryPropType;
   children?: React.ReactNode | React.ReactNode[];
+  defaultAxes?: AxesType;
+  defaultPolarAxes?: AxesType;
   domain?: DomainPropType;
   endAngle?: number;
-  events?: EventPropTypeInterface<string, string | number>[];
   eventKey?: StringOrNumberOrCallback;
+  events?: EventPropTypeInterface<string, string | number>[];
   innerRadius?: number;
   prependDefaultAxes?: boolean;
   startAngle?: number;
-  style?: Pick<VictoryStyleInterface, "parent">;
+  style?: Pick<VictoryStyleInterface, "parent"> & { background?: VictoryStyleObject };
 }
 
 export class VictoryChart extends React.Component<VictoryChartProps, any> {}
diff --git a/stories/victory-chart.js b/stories/victory-chart.js
@@ -181,14 +181,6 @@ storiesOf("VictoryChart.style", module)
       }}
     />
   ))
-  .add("with background and parent styles", () => (
-    <VictoryChart
-      style={{
-        background: { fill: "pink" },
-        parent: { border: "2px solid #000", margin: 20, backgroundColor: "cyan" }
-      }}
-    />
-  ))
   .add("with background and parent styles on circle component", () => (
     <VictoryChart
       polar